javascript——拖拽原理小实例

#div1{ width: 100px; height: 100px; background: green; position: absolute;}

<div id="div1"></div>

/*
onmousedown : 选择元素
onmousemove : 移动元素
onmouseup     : 释放元素
*/
window.onload = function(){

var oDiv = document.getElementById('div1');

//鼠标按下时
oDiv.onmousedown = function(ev){

var ev = ev || event;

// 获取鼠标点击时的距离位置
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop ;

//鼠标移动时
document.onmousemove = function(ev){

var ev = ev || event;

oDiv.style.left = ev.clientX - disX + 'px';
oDiv.style.top = ev.clientY - disY + 'px';
};
//鼠标释放时
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
}
};

};

window.onload = function(){
/*
1.拖拽的时候，如果有文字被选中，会产生问题
原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果
解决：
标准：阻止默认行为
非标准ie：全局捕获
*/
var oDiv = document.getElementById('div1');

oDiv.onmousedown = function(ev){

var ev = ev || event;

var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;

if(oDiv.setCapture){
oDiv.setCapture();
}

document.onmousemove = function(ev){

var ev = ev || event;

oDiv.style.left = ev.clientX - disX + 'px';
oDiv.style.top = ev.clientY - disY + 'px';
};

document.onmouseup = function(){

document.onmousemove = document.onmouseup = null;

if(oDiv.releaseCapture){
oDiv.releaseCapture();
}
return false;
};

};

};