拖拽雛形：
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;
}
}
}
問題：如果鼠標拖的快點柬讨，會發(fā)現(xiàn)鼠標從div出去后表锻，這個時候div不會跟著鼠標走精钮。
原因：mousemove的事件是加在div上的威鹿，所以鼠標一旦脫離了div,那么這個時候mousemove就觸發(fā)不了了
解決方法：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：
基于上面代碼，問題又出現(xiàn)了
問題：拖動鼠標時轨香，鼠標不在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下面有其他元素的時候策橘，點擊拖動時，會選中下面的元素
原因：觸發(fā)了鼠標的默認事件
解決方法：去掉默認事件娜亿，但是在哪個事件中加了丽已？拖拽是在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被拖出瀏覽器窗口時，會出現(xiàn)滾動條
原因：低版本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;
}
}
再送網(wǎng)友一套移動端拖拽代碼：
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);
});
}
