js中之方块拖拽

在js中如何实现方块之间的拖拽？

首先我们应在网页中定义一个方块 利用functio （event）{   }函数和鼠标事件的onmousedown来对方块的上左边距进行改变来实现方块移动

 

   上面两张图片所实现的，是将红色盒子进行移动，绿色盒子不动，红色盒子随便移动，以此来达到效果。代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10         #div1{
11             width: 300px;
12             height: 300px;
13             background: red;
14             position: absolute;
15             left:0;
16             top:0;
17         }
18         #div2{
19             width: 300px;
20             height: 200px;
21             background: green;
22             position: absolute;
23             left:1100px;
24             top:200px
25         }
26     </style>
27 </head>
28 <body>
29 <div id="div1"></div>
30 <div id="div2"></div>
31 </body>
32 </html>
33 <script>
34 var div1=document.getElementById('div1')
35     div1.onmousedown=function (event) {
36     var chaX=event.clientX-div1.offsetLeft,
37         chaY=event.clientY-div1.offsetTop
38         document.onmousemove=function (event) {
39         div1.style.left=event.clientX-chaX+'px';
40         div1.style.top=event.clientY-chaY+'px'
41         }
42     document.onmouseup=function () {
43         document.onmousemove=null
44     }
45     }
46 
47 </script>

 

 

posted @ 2021-12-09 10:36  爱吃小橙子  阅读(208)  评论(0)    收藏  举报