pc端移動端拖拽實現

標籤：def   bsp   綁定   ntb   event   setw   mouse   log   else   

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

　　html

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

　　js

 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     };

 

pc端移動端拖拽實現