实现元素简单的拖拽
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现元素简单的拖拽相关的知识，希望对你有一定的参考价值。
1.通过元素的offsetLeft，offsettop实现元素的拖拽
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 .box { 9 width: 100px; 10 height: 100px; 11 background-color: darkcyan; 12 position: absolute; 13 left: 0px; 14 top: 0px; 15 } 16 </style> 17 </head> 18 19 <body> 20 <div class="box"></div> 21 <script src="js/utils.js"></script> 22 <script> 23 var box = document.querySelector(‘.box‘); 24 var nowx, nowy; 25 document.onmousedown = function() { 26 var event = new getEvent(); 27 var sx = event.clientX; 28 var sy = event.clientY; 29 var ex = box.offsetLeft; 30 var ey = box.offsetTop; 31 console.log(ex, ey); 32 var x = sx - ex; 33 var y = sy - ey; 34 document.onmousemove = function() { 35 var event = new getEvent(); 36 var sx1 = event.clientX; 37 var sy2 = event.clientY; 38 nowx = sx1 - x + ‘px‘; 39 nowy = sy2 - y + ‘px‘; 40 box.style.left = sx1 - x + ‘px‘; 41 box.style.top = sy2 - y + ‘px‘; 42 43 } 44 45 document.onmouseup = function() { 46 document.onmousemove = null; 47 document.onmouseup = null; 48 } 49 } 50 </script> 51 </body> 52 53 </html>
2.HTML5的原生拖拽
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style> 8 .box1 { 9 height: 50px; 10 width: 50px; 11 background-color: darkseagreen; 12 } 13 14 .box2 { 15 height: 100px; 16 width: 100px; 17 position: fixed; 18 background-color: royalblue; 19 bottom: 50px; 20 right: 50px; 21 } 22 23 .border1 { 24 border: 5px solid black; 25 } 26 </style> 27 </head> 28 29 <body> 30 <!-- 31 1.拖放的元素:ondragstart,ondrag,ondragend,只有图片，文字，超链接默认是支持拖放，一个元素是否支持拖放取决于dragable 32 2.拖放的目标:ondragenter,ondragover,ondragleave,ondrop,一般元素默认都不支持放，如果要支持放，重写ondrageenter,ondragover,FF还需要重写ondrop,在这些事件函数 33 中阻止默认行为 34 3.--> 35 36 <div class="box1" draggable="true" id=‘b‘></div> 37 <div class="box2"></div> 38 <script src="js/utils.js"></script> 39 <script> 40 var box1 = document.querySelector(‘.box1‘); 41 var box2 = document.querySelector(‘.box2‘); 42 //dragenter drag drafend 43 box1.ondragstart = function() { 44 var event = getEvent(); 45 box1.classList.add(‘border1‘); 46 event.dataTransfer.setData(‘id‘, ‘b‘) 47 48 } 49 box2.ondragenter = function() { 50 var event = getEvent(); 51 preventDefault(event); 52 } 53 box2.ondragover = function() { 54 var event = getEvent(); 55 preventDefault(event); 56 } 57 box2.ondrop = function() { 58 var event = getEvent(); 59 preventDefault(event); 60 var box = event.dataTransfer.getData(‘id‘); //box=b 获取的是元素id 61 var a = document.getElementById(box); 62 console.log(box); 63 this.appendChild(a); 64 } 65 </script> 66 </body> 67 68 </html>
以上是关于实现元素简单的拖拽的主要内容，如果未能解决你的问题，请参考以下文章