拖动的实现(不能用drag相关的属性)

实现一个效果，当拖动块拖动到放置区域的时候，拖动区域改变背景颜色，不能用drag 相关的属性。（代码只是为了实现效果，没有做一些优化或者格式方面的处理）

 　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Promise</title>
 6     <style type="text/css">
 7         .drop-area {
 8             width: 300px;
 9             height: 300px;
10             background: #eee;
11             margin: 100px;
12             border: 1px solid #a1a1a1;
13         }
14 
15         .drop-item {
16             width: 50px;
17             height: 50px;
18             border: 1px solid #ddd;
19             position: absolute;
20             top: 0;
21             left: 0;
22             background: red;
23         }
24     </style>
25 </head>
26 <body>
27     <!-- <div>&#10003;</div>
28     <input value="&#10003;" /> -->
29 
30     <div class="drop-area">
31         
32     </div>
33 
34     <div class="drop-item"></div>
35 
36     <script>
37         // state center
38         let mousedownInDropItem = false;
39         let dropItem = document.getElementsByClassName('drop-item')[0];
40         let dropArea = document.getElementsByClassName('drop-area')[0];
41         let itemWidth = dropItem.offsetWidth;
42         let itemHeight = dropItem.offsetHeight;
43         let areaWidth = dropArea.offsetWidth;
44         let areaHeight = dropArea.offsetHeight;
45         let tempSpace = {
46             x: 0,
47             y: 0
48         }
49 
50 
51         document.addEventListener('mousedown', (ev, vm) =>{
52             if((ev.target || ev.srcElement).className == 'drop-item'){
53                 mousedownInDropItem = true;
54                 getItemSpace(ev, dropItem);
55             }
56         })
57 
58         document.addEventListener('mouseup', (ev, vm) =>{
59             console.log('up');
60             if(ev.target.className == 'drop-item') {
61                 hasInArea(dropItem, dropArea);
62             }
63             mousedownInDropItem = false;
64         })
65 
66         document.addEventListener('mousemove', (ev, vm) =>{
67             if(mousedownInDropItem) {
68                 let x = ev.clientX;
69                 let y = ev.clientY;
70                 dropItem.style.left = x - tempSpace.x + 'px';
71                 dropItem.style.top = y - tempSpace.y + 'px';
72             }
73         })
74 
75         function hasInArea(target, area) {
76             let dropItemSpaceX = dropItem.offsetLeft + itemWidth;
77             let dropAreaSpaceX = dropArea.offsetLeft + areaWidth;
78             let dropItemSpaceY = dropItem.offsetTop + itemHeight;
79             let dropAreaSpaceY = dropArea.offsetTop + areaHeight;
80             let containX = (dropItem.offsetLeft >= dropArea.offsetLeft) && (dropItemSpaceX <= dropAreaSpaceX);
81             let containY = (dropItem.offsetTop >= dropArea.offsetTop) && (dropItemSpaceY <= dropAreaSpaceY);
82 
83             if(containX && containY){
84                 dropArea.style.backgroundColor = 'yellow';
85             }else {
86                 dropArea.style.backgroundColor = '#eee';
87             }
88         }
89 
90         function getItemSpace(ev, el) {
91             tempSpace.x = ev.clientX - dropItem.offsetLeft;
92             tempSpace.y = ev.clientY - dropItem.offsetTop;
93             return;
94         }
95     </script>
96 </body>
97 </html>

 

posted @ 2019-04-02 10:56  一步一步跑  阅读(415)  评论(0)  编辑  收藏  举报