| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>移动的方块</title> | |
| <style> | |
| div{width: 100px; height: 100px; background: deeppink; position: absolute;top:100px;left:100px;} | |
| </style> | |
| </head> | |
| <body style="height:2000px;"> | |
| <div id="div" ></div> | |
| <div id="div1"></div> | |
| <div id="div2"></div> | |
| <div id="div3"></div> | |
| <script> | |
| //var oDiv = document.getElementById('div'); | |
| var aDiv = document.getElementsByTagName('div'); | |
| //drag(oDiv); | |
| //循环调用拖拽效果 | |
| for(var i =0;i<aDiv.length;i++){ | |
| drag(aDiv[i]); | |
| } | |
| function drag(obj){ | |
| obj.onmousedown = function(ev){ | |
| var ev = ev || window.event; | |
| console.log(ev.clientX+'$$'+ev.clientY); | |
| //获取方块在页面的位置 | |
| disX = ev.clientX - obj.offsetLeft; | |
| disY = ev.clientY - obj.offsetTop; | |
| console.log(disX); | |
| console.log(disY); | |
| //鼠标移动 | |
| document.onmousemove = function(ev){ | |
| var ev = ev || window.event; | |
| var x = ev.pageX - disX; | |
| var y = ev.pageY - disY; | |
| obj.style.top = (y)+'px'; | |
| obj.style.left = (x)+'px'; | |
| } | |
| //鼠标抬起时，鼠标移动事件不生效 | |
| document.onmouseup = function(){ | |
| document.onmousemove = null; | |
| document.onmouseup = null; | |
| } | |
| } | |
| } | |
</script> |
|
| </body> | |
| </html> |
javascript实现简单的拖拽
猜你喜欢
转载自blog.csdn.net/qq_39634880/article/details/80357749
今日推荐
周排行