pc端移动端拖拽实现-蒲公英云

pc端移动端拖拽实现

#div1 {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }

　　html

<div id="div1">
    </div>

1     window.onload = function () {
 2         var oDiv = document.getElementById('div1');
 3         //pc端
 4         oDiv.onmousedown = function (ev) {
 5             var oEvent = ev || event; //需要获取和事件相关的信息时使用
 6             var disX = oEvent.clientX - oDiv.offsetLeft;
 7             var disY = oEvent.clientY - oDiv.offsetTop;
 8 
 9             document.onmousemove = function (ev) {
10                 var oEvent = ev || event;
11                 var l = oEvent.clientX - disX;
12                 var t = oEvent.clientY - disY;
13 
14                 if (l < 0) {
15                     l = 0;
16                 } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
17                     l = document.documentElement.clientWidth - oDiv.offsetWidth;
18                 }
19 
20                 if (t < 0) {
21                     t = 0;
22                 } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
23                     t = document.documentElement.clientHeight - oDiv.offsetHeight;
24                 }
25 
26                 oDiv.style.left = l + 'px';
27                 oDiv.style.top = t + 'px';
28             };
29 
30             document.onmouseup = function () {
31                 document.onmousemove = null;
32                 document.onmouseup = null;
33             };
34         };
35         //移动端
36         // 拖拽
37         // 获取节点
38         var block = document.getElementById("right");
39         var oW, oH;
40         // 绑定touchstart事件
41         oDiv.addEventListener("touchstart", function (e) {
42             var touches = e.touches[0];
43             oW = touches.clientX - oDiv.offsetLeft;
44             oH = touches.clientY - oDiv.offsetTop;
45             //阻止页面的滑动默认事件
46             document.addEventListener("touchmove", defaultEvent, false);
47         }, false);
48         oDiv.addEventListener("touchmove", function (e) {
49             var touches = e.touches[0];
50             var oLeft = touches.clientX - oW;
51             var oTop = touches.clientY - oH;
52             if (oLeft < 0) {
53                 oLeft = 0;
54             } else if (oLeft > document.documentElement.clientWidth - oDiv.offsetWidth) {
55                 oLeft = (document.documentElement.clientWidth - oDiv.offsetWidth);
56             }
57             oDiv.style.left = oLeft + "px";
58             oDiv.style.top = oTop + "px";
59         }, false);
60         oDiv.addEventListener("touchend", function () {
61             document.removeEventListener("touchmove", defaultEvent, false);
62         }, false);
63 
64         function defaultEvent(e) {
65             e.preventDefault();
66         };
67     };