1.HTML结构:
<div class='drag'></div>
<div class='drag2'></div>
2.CSS样式:
.drag,.drag2{
width:100px;
height: 100px;
background-color: pink;
position: absolute;
}
.drag2{
background-color: green;
}
3.JS代码:(可实现页面中任意元素的拖拽)
document.onmousedown = function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
var l = parseInt(event.clientX - target.offsetLeft);
var t = parseInt(event.clientY - target.offsetTop);
this.onmousemove = function(e){
var event = e || window.event;
var left = parseInt(event.clientX) - l;
var top = parseInt(event.clientY) - t;
target.style.left = left + 'px';
target.style.top = top + 'px';
}
this.onmouseup = function(){
this.onmousemove = null;
}
}