拖拽雏形：
html+css 代码：
<style>
#box{
position: absolute;
left:0;
top:0;
width:200px;
height:200px;
background: red;
}
</style>
<div id ="box"></div>
window.onload = function () {
var elBox = document.getElementById('box');
elBox.onmousedown = function (e) {
var oEvent = e || event;
var disX = oEvent.clientX - elBox.offsetLeft;
var disY = oEvent.clientY - elBox.offsetTop;
elBox.onmousemove = function(e) {
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
elBox.style.left = l + 'px';
elBox.style.top = t + 'px';
}
elBox.onmouseup = function () {
elBox.onmousemove = null;
elBox.onmouseup = null;
}
}
}
问题：如果鼠标拖的快点，会发现鼠标从div出去后，这个时候div不会跟着鼠标走。
原因：mousemove的事件是加在div上的，所以鼠标一旦脱离了div,那么这个时候mousemove就触发不了了
解决方法：onmousemove加在document上
window.onload = function () {
var elBox = document.getElementById('box');
elBox.onmousedown = function (e) {
var oEvent = e || event;
var disX = oEvent.clientX - elBox.offsetLeft;
var disY = oEvent.clientY - elBox.offsetTop;
document.onmousemove = function(e) {
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
elBox.style.left = l + 'px';
elBox.style.top = t + 'px';
}
elBox.onmouseup = function () {
document.onmousemove = null;
elBox.onmouseup = null;
}
}
}
拖拽改进版1：
基于上面代码，问题又出现了
问题：拖动鼠标时，鼠标不在div上的时候，我抬起了鼠标，但是当我再回来之后，div还会跟着动
原因：和上面的问题一样
解决方法：
window.onload = function () {
var elBox = document.getElementById('box');
elBox.onmousedown = function (e) {
var oEvent = e || event;
var disX = oEvent.clientX - elBox.offsetLeft;
var disY = oEvent.clientY - elBox.offsetTop;
document.onmousemove = function(e) {
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
elBox.style.left = l + 'px';
elBox.style.top = t + 'px';
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
拖拽改进版2：
基于上面的代码，我们再看看浏览器的兼容性问题
问题：在火狐浏览器中，如果div下面有其他元素的时候，点击拖动时，会选中下面的元素
原因：触发了鼠标的默认事件
解决方法：去掉默认事件，但是在哪个事件中加了？拖拽是在nomousedown开始的，当鼠标按下的时候，拖拽就开始了。所以要加在onmousedown中。
window.onload = function () {
var elBox = document.getElementById('box');
elBox.onmousedown = function (e) {
var oEvent = e || event;
var disX = oEvent.clientX - elBox.offsetLeft;
var disY = oEvent.clientY - elBox.offsetTop;
document.onmousemove = function(e) {
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
elBox.style.left = l + 'px';
elBox.style.top = t + 'px';
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
拖拽改进版3：
基于上面的代码，看看在IE浏览器中兼容性
问题：在低版本的IE中，当div被拖出浏览器窗口时，会出现滚动条
原因：低版本IE的bug
解决方法：使用ie浏览器独有的2个方法：setCapture() 和 releaseCapture()方法
window.onload = function () {
var elBox = document.getElementById('box');
elBox.onmousedown = function (e) {
var oEvent = e || event;
var disX = oEvent.clientX - elBox.offsetLeft;
var disY = oEvent.clientY - elBox.offsetTop;
document.onmousemove = function(e) {
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
elBox.style.left = l + 'px';
elBox.style.top = t + 'px';
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
elBox.releaseCapture && elBox.releaseCapture();
}
elBox.setCapture && elBox.setCapture();
return false;
}
}
再送网友一套移动端拖拽代码：
window.onload = function () {
var oBox = document.getElementById('box');
oBox.addEventListener('touchstart', function (e) {
var disX = e.targetTouches[0].pageX - oBox.offsetLeft();
var disY = e.targetTouches[0].pageY - oBox.offsetTop();
function move (e) {
oBox.style.left = e.targetTouches[0].pageX - disX + 'px';
oBox.style.top = e.targetTouches[0].pageY - disY + 'px';
}
function end (e) {
oBox.removeEventListener('touchmove', move, false);
oBox.removeEventListener('touchend', end, false);
}
oBox.addEventListener('touchmove', move, false);
oBox.addEventListener('touchend', end, false);
});
}
