js学习笔记28----拖拽
Posted 前端[色色]
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js学习笔记28----拖拽相关的知识，希望对你有一定的参考价值。
原理：先计算鼠标与拖拽目标的左侧距离 跟 上面距离，再计算拖动后的位置。
示例代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>拖拽原理</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <style type="text/css"> 8 #moveBlock{ 9 width:100px;height:100px;background-color:#f00;position:absolute 10 } 11 </style> 12 <script> 13 14 window.onload = function(){ 15 var oDiv = document.getElementById("moveBlock"); 16 oDiv.onmousedown = function(ev){ 17 var ev = ev || event; 18 var disX = ev.clientX - this.offsetLeft; //计算鼠标与当前div左侧距离 19 var disY = ev.clientY - this.offsetTop; //计算鼠标与当前div顶侧距离 20 21 document.onmousemove = function(ev){ 22 var ev = ev || event; 23 oDiv.style.left = ev.clientX - disX + "px";//计算拖动后与左侧的距离 24 oDiv.style.top = ev.clientY - disY + "px";//计算拖动后与顶部的距离 25 } 26 27 document.onmouseup = function(){ 28 document.onmousemove = document.onmouseup = null; 29 } 30 31 } 32 } 33 34 </script> 35 </head> 36 <body> 37 <div id="moveBlock"> 38 39 </div> 40 </body> 41 </html>
我们运行上面的代码如果只是一个单纯的div没什么问题，但是如果同时有文字选中之后，再拖动div会发现有问题。
那是因为当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认的文字拖拽效果。
解决方案：
标准：用return false; 阻止事件默认行为
非标准ie :用setCapture()设置全局捕获,当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事情，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发。
setCapture()兼容性：
ie : 有，并且有效果
ff : 有，但是没效果
chorme : 没有
具体代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>拖拽改进版</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <style type="text/css"> 8 #moveBlock{ 9 width:100px;height:100px;background-color:#f00;position:absolute 10 } 11 </style> 12 <script> 13 14 window.onload = function(){ 15 var oDiv = document.getElementById("moveBlock"); 16 oDiv.onmousedown = function(ev){ 17 var ev = ev || event; 18 var disX = ev.clientX - this.offsetLeft; 19 var disY = ev.clientY - this.offsetTop; 20 //设置全局捕获 21 if(oDiv.setCapture){ 22 oDiv.setCapture(); 23 } 24 25 document.onmousemove = function(ev){ 26 var ev = ev || event; 27 oDiv.style.left = ev.clientX - disX + "px"; 28 oDiv.style.top = ev.clientY - disY + "px"; 29 } 30 31 document.onmouseup = function(){ 32 document.onmousemove = document.onmouseup = null; 33 //释放事件捕获 releaseCapture(); 34 if(oDiv.releaseCapture){ 35 oDiv.releaseCapture(); 36 } 37 } 38 39 return false; //阻止事件默认行为 40 41 } 42 } 43 44 </script> 45 </head> 46 <body> 47 <p> 48 原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认的文字拖拽效果。<br> 49 解决： 用return false; 阻止事件默认行为. 50 </p> 51 <div id="moveBlock"> 52 53 </div> 54 </body> 55 </html>
封装成一个拖拽函数：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>拖拽封装</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <style type="text/css"> 8 #moveBlock{ 9 width:100px;height:100px;background-color:#f00;position:absolute 10 } 11 </style> 12 <script> 13 14 window.onload = function(){ 15 16 var oDiv = document.getElementById("moveBlock"); 17 drag(oDiv); 18 19 function drag(obj){ 20 obj.onmousedown = function(ev){ 21 var ev = ev || event; 22 var disX = ev.clientX - this.offsetLeft; 23 var disY = ev.clientY - this.offsetTop; 24 25 if(obj.setCapture){ 26 obj.setCapture; 27 } 28 29 document.onmousemove = function(ev){ 30 var ev = ev || event; 31 obj.style.left = ev.clientX - disX + "px"; 32 obj.style.top = ev.clientY - disY + "px"; 33 } 34 35 document.onmouseup = function(){ 36 document.onmousemove = document.onmouseup = null; 37 //释放事件捕获 releaseCapture(); 38 if(obj.releaseCapture){ 39 obj.releaseCapture(); 40 } 41 } 42 43 return false; //阻止事件默认行为 44 45 } 46 } 47 48 } 49 50 </script> 51 </head> 52 <body> 53 <p> 54 原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认的文字拖拽效果。<br> 55 解决： 用return false; 阻止事件默认行为. 56 </p> 57 <div id="moveBlock"> 58 59 </div> 60 </body> 61 </html>
以上是关于js学习笔记28----拖拽的主要内容，如果未能解决你的问题，请参考以下文章