怎么用 javascript 实现拖拽

怎么用 javascript 实现拖拽

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部分

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

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

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

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

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