实现元素简单的拖拽-CSDN博客

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>