style:
*{
margin:0;
padding:0;
}
#box{
width:100px;
height:100px;
background:red;
position:absolute;
}
注:拖拽时元素需要定位 (绝对定位)
js代码:
var obox = document.getElementById("box");
obox.onmousedown = function(ev){
//兼容
var oEvent = ev || event;
//获取距离事件源的距离
var left = oEvent.clientX - obox.offsetLeft;
var top = oEvent.clientY - obox.offsetTop;
document.onmousemove = function(ev){
//兼容
var oEvent = ev || event;
obox.style.left = oEvent.clientX - left + "px";
obox.style.top = oEvent.clientY - top + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
网友评论