干货：实现拖拽效果

备注：加粗字段就是实现元素跟随鼠标移动的事件。

var redDiv = document.getElementById('redDiv');

var box = document.getElementsByClassName('box')[0];

var body = document.getElementsByTagName('body')[0];

redDiv.onmousedown = function(ev){

var offsetX = ev.offsetX;

var offsetY = ev.offsetY;

document.onmousemove = function(ev){

var evObj = window.event || ev;

var x = evObj.pageX - box.offsetLeft -8- offsetX;

//items[0].style.left = ev.clientX - items[0].offsetWidth/2 + "px";

var y = evObj.pageY- box.offsetTop -8- offsetY;

//items[0].style.top = ev.clientY - items[0].offsetHeight/2 + "px";

if(x<0){

x=0;

}

redDiv.style.left = x+"px";

redDiv.style.top = y+"px";

}

}

redDiv.onmouseup = function(){

document.onmousemove = null;

}