JS实现简单拖拽效果

#wrap {

position: relative;

border: 1px solid #000;

width: 800px;

height: 500px;

}

#drog {

position: absolute;

left: 0;

top: 0;

width: 100px;

height: 100px;

background: red;

cursor: move;

}

(function(){

var drog = document.querySelector('#drog');

/*

1.记录按下的时候的鼠标位置

2.记录按下的时候元素的位置

*/

drog.onmousedown = function(e){

var startElY = css(drog,"top");

var startElX = css(drog,"left");

var startMouseX = e.clientX;

var startMouseY = e.clientY;

/*

求出鼠标移动的距离，

操作元素也移动相应的距离

为了可以一直跟随，所以添加给document

*/

document.onmousemove = function(e){

var nowMouseX = e.clientX;

var nowMouseY = e.clientY;

var disX = nowMouseX - startMouseX;

var disY = nowMouseY - startMouseY;

var x = disX + startElX;

var y = disY + startElY;

css(drog,"left",x);

css(drog,"top",y);

};

document.onmouseup = function(){

document.onmousemove = null;

document.onmouseup = null;

};

};

})();