怎么用 javascript 实现拖拽

2024-12-27 16:42:05

推荐回答（3个）

回答1：

　　javascript 实现拖拽实现原理。如下：

　　用JavaScript事件方法表示就是：

　　① onmousedown + onmousemove → startDrag()
② onmouseup → stopDrag()

1.首先调用js文件，如下：

2.然后使用startDrag()方法绑定拖拽效果，startDrag()方法有两个参数，第一个是点击的对象（即点击那里可以实现拖拽，例如弹出层的标题栏），第二个是拖拽的对象（例如一个弹出层）。也就是startDrag(触发拖拽对象，被拖拽对象)。


#box{position:absolute; left:100px; top:100px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;}
#main{border:1px solid #a0b3d6; background:white;}
#bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}
#content{width:420px; height:250px; padding:10px 5px;}



   
       拖拽

           内容……

JS部分


   var oBox = document.getElementById("box");
   var oBar = document.getElementById("bar");
   startDrag(oBar, oBox);

回答3：

在DOM上绑定事件一共三个
onmousedown
onmousemove
onmouseup

DOM.on({
onmousedown:function(e){},
onmousemove:function(){},
onmouseup:function(){e},
})

然后再在里面写样式写功能
onmousedown:function(){} //这边主要是记录 target 的属性

onmousemove:function(){} // 这边主要是写 DOM跟随

onmouseup:function(){} // 这里主要是写鼠标放开时候重新记录 DOM的位置