拖拽 API#

1<div class="a" draggable="true"></div>
2<!-- 谷歌，safari可以，火狐，Ie不支持 -->

1<div class="a" draggable="true"></div>
2<script>
3  var oDragDiv = document.getElementsByClassName("a")[0];
4  var beginX = 0;
5  var beginY = 0;
6  oDragDiv.ondragstart = function (e) {
7    beginX = e.clientX;
8    beginY = e.clientY;
9    console.log(e);
10  };
11  oDragDiv.ondragend = function (e) {
12    var x = e.clientX - beginX;
13    var y = e.clientY - beginY;
14    oDragDiv.style.left = oDragDiv.offsetLeft + x + "px";
15    oDragDiv.style.top = oDragDiv.offsetTop + y + "px";
16  };
17</script>

1<div class="a" draggable="true"></div>
2<div class="target"></div>
3
4<script>
5  var oDragDiv = document.getElementsByClassName("a")[0];
6  oDragDiv.ondragstart = function (e) {};
7  oDragDiv.ondrag = function (e) {
8    //只要移动就不停的触发
9  };
10  oDragDiv.ondragend = function (e) {};
11  var oDragTarget = document.getElementsByClassName("target")[0];
12  oDragTarget.ondragenter = function (e) {
13    //不是元素图形进入就触发的而是拖拽的鼠标进入才触发的
14    // console.log(e);
15  };
16  oDragTarget.ondragover = function (e) {
17    //类似于ondrag，只要在区域内移动，就不停的触发
18    // console.log(e);
19    // ondragover--回到原处 / 执行drop事件
20  };
21  oDragTarget.ondragleave = function (e) {
22    console.log(e);
23    // 离开就触发
24  };
25  oDragTarget.ondrop = function (e) {
26    console.log(e);
27    // 所有标签元素，当拖拽周期结束时，默认事件是回到原处，要想执行ondrop，必须在ondragover里面加上e.preventDefault();
28    // 事件是由行为触发，一个行为可以不只触发一个事件
29    // 抬起的时候，有ondragover默认回到原处的事件，只要阻止回到原处，就可以执行drop事件
30
31    // A -> B(阻止) -> C             想阻止c,只能在B上阻止  责任链模式
32  };
33</script>

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7    <style>
8      * {
9        padding: 0;
10        margin: 0;
11      }
12
13      .box1 {
14        position: absolute;
15        width: 150px;
16        height: auto;
17        border: 1px solid;
18        padding-bottom: 10px;
19      }
20
21      .box2 {
22        position: absolute;
23        width: 150px;
24        left: 300px;
25        height: auto;
26        border: 1px solid;
27        padding-bottom: 10px;
28      }
29
30      li {
31        position: relative;
32        width: 100px;
33        height: 30px;
34        background: #abcdef;
35        margin: 10px auto 0px auto;
36        /* 居中，上下10px */
37        list-style: none;
38      }
39    </style>
40  </head>
41
42  <body>
43    <div class="box1">
44      <ul>
45        <li></li>
46        <li></li>
47        <li></li>
48      </ul>
49    </div>
50    <div class="box2"></div>
51    <script>
52      var dragDom;
53      var liList = document.getElementsByTagName("li");
54      for (var i = 0; i < liList.length; i++) {
55        liList[i].setAttribute("draggable", true); //赋予class
56        liList[i].ondragstart = function (e) {
57          console.log(e.target);
58          dragDom = e.target;
59        };
60      }
61      var box2 = document.getElementsByClassName("box2")[0];
62      box2.ondragover = function (e) {
63        e.preventDefault();
64      };
65      box2.ondrop = function (e) {
66        // console.log(dragDom);
67        box2.appendChild(dragDom);
68        dragDom = null;
69      };
70
71      // 拖回去
72      var box1 = document.getElementsByClassName("box1")[0];
73      box1.ondragover = function (e) {
74        e.preventDefault();
75      };
76      box1.ondrop = function (e) {
77        // console.log(dragDom);
78        box1.appendChild(dragDom);
79        dragDom = null;
80      };
81    </script>
82  </body>
83</html>