拖拽的实现原理：
拖拽时，将被拖拽元素新位置的 left 和 top 重新赋值给被拖拽元素的 left 和 top ，覆盖上一个位置的值,鼠标按下是在元素内部，所以还要减去鼠标按下位置相对于元素内部本身的 left 和 top 值
很简单 需要三个事件 onmousedown onmousemove onmouseup
并给需要拖动的节点增加一个属性叫droping(这个属性表示节点是不是正处于拖拽状态)下面给出一份演示
onmousedown 控制节点扩展的属性droping为true(表示可以移动节点了)
onmousemove 控制节点的位置(判断是否可以移动如果是就移动)
ommouseup控制节点的扩展属性为false(表示不能移动节点了)
<!DOCTYPE HTML><html>
<head>
<title>演示</title>
<style type="text/css">
</style>
</head>
<body>
<div id="dropDiv">
我可以拖动
</div>
<script type="text/javascript">
function dropDivFun(Element){
//设置节点的定位为fixed
Element.style.position="fixed"
//获取事件对象函数 方便获取事件的clientX
function getEvent(){
if(event){
e=event
}else if(window.event){
e=window.event
}else{
e=arguments.callee.arguments[0]
}
return e
}
//添加mousedown事件
Element.addEventListener("mousedown",function(){
var e=getEvent()
if(!Element.droping){
//设置droping为true并记录初始的位置
Element.droping=true
Element.start_x=e.clientX-Element.offsetLeft
Element.start_y=e.clientY-Element.offsetTop
}
})
Element.addEventListener("mousemove",function(){
var e=getEvent()
//移动节点
if(Element.droping){
Element.style.left=e.clientX-Element.start_x+"px"
Element.style.top=e.clientY-Element.start_y+"px"
}
})
Element.addEventListener("mouseup",function(){
if(Element.droping){
//设置droping为false并释放初始的变量
Element.droping=false
Element.start_x=null
Element.start_y=null
}
})
}
//为节点添加drop事件
dropDivFun(document.getElementById("dropDiv"))
</script>
</body>
</html>
该演示演示了使用原生js给节点拖动
