這段代碼詳細(xì)講述了JS拖拽的原理和方法，值得學(xué)習(xí)和借鑒。

/**

* 跨平臺(tái)的事件監(jiān)聽函數(shù)

* @param {Node} node 需要監(jiān)聽事件的DOM節(jié)點(diǎn)

* @param {String} eventType 需要監(jiān)聽的事件類型

* @param {Function} callback 事件監(jiān)聽回調(diào)函數(shù)

* @type Function 返回值為函數(shù)類型

* @return 返回監(jiān)聽回調(diào)函數(shù)的引用，用于釋放監(jiān)聽

*/

function bindEvent(node, eventType, callback) {

if (node.attachEvent) {

if (eventType.indexOf('on')) { eventType = 'on' + eventType;}

node.attachEvent(eventType, callback);

} else {

if (!eventType.indexOf('on'))

eventType = eventType.substring(2, eventType.length);

node.addEventListener(eventType, callback, false);

}

return callback;

}

/**

* 跨平臺(tái)的事件監(jiān)聽卸載函數(shù)

* @param {Node} node 需要卸載監(jiān)聽事件的DOM節(jié)點(diǎn)

* @param {String} eventType 需要卸載監(jiān)聽的事件類型

* @param {Function} callback 卸載事件監(jiān)聽回調(diào)函數(shù)

*/

function removeEvent(node, eventType, callback) {

if (node.detachEvent) {

if (eventType.indexOf('on')) { eventType = 'on' + eventType;}

node.detachEvent(eventType, callback);

} else {

if (!eventType.indexOf('on'))

eventType = eventType.substring(2, eventType.length);

node.removeEventListener(eventType, callback, false);

}

}

/**

* 兼容不同定位方式的通用拖動(dòng)接口

* @param {Node} dragger 需要被拖動(dòng)的元素

*/

//必須告訴系統(tǒng)，哪些元素是可以進(jìn)行交互，而哪些是不行

function canDrag(dragger) {

var drag = bindEvent(dragger,'onmousedown',function(e){

//兼容事件對(duì)象

e = e || event;

//兼容坐標(biāo)屬性

var pageX = e.clientX || e.pageX;

var pageY = e.clientY || e.pageY;

//兼容樣式對(duì)象

var style = dragger.currentStyle || window.getComputedStyle(dragger,null);

//當(dāng)沒(méi)有設(shè)置left和top屬性時(shí)，IE下默認(rèn)值為auto

var offX = parseInt(style.left) || 0;

var offY = parseInt(style.top) || 0;

//獲取鼠標(biāo)相對(duì)于元素的間距

var offXL = pageX - offX;

var offYL = pageY - offY;

//為dragger增加onDrag屬性，用來(lái)存儲(chǔ)拖動(dòng)事件

if (!dragger.onDrag) {

//監(jiān)聽拖動(dòng)事件

dragger.onDrag = bindEvent(document,'onmousemove',function(e){

e = e || event;

var x = e.clientX || e.pageX;

var y = e.clientY || e.pageY

//設(shè)置X坐標(biāo)

dragger.style.left = x - offXL + 'px';

//設(shè)置Y坐標(biāo)

dragger.style.top = y - offYL + 'px';

});

//監(jiān)聽拖動(dòng)結(jié)束事件

dragger.onDragEnd = bindEvent(document,'onmouseup',function(e){

//釋放前讀取事件對(duì)象

var x = e.clientX || e.pageX;

var y = e.clientY || e.pageY

//釋放拖動(dòng)監(jiān)聽和結(jié)束監(jiān)聽

removeEvent(document, 'onmousemove', dragger.onDrag);

removeEvent(document, 'onmouseup', dragger.onDragEnd);

try {

//刪除拖動(dòng)時(shí)所用的屬性，兼容FF使用

delete dragger.onDrag;

delete dragger.onDragEnd;

} catch (e) {

//刪除拖動(dòng)時(shí)所用的屬性，兼容IE6使用

dragger.removeAttribute('onDrag');

dragger.removeAttribute('onDragEnd');

}

});

}

});

return function() {

//返回一個(gè)可以取消拖動(dòng)功能的函數(shù)引用

//釋放拖動(dòng)監(jiān)聽和結(jié)束監(jiān)聽

removeEvent(document, 'onmousemove', dragger.onDrag);

removeEvent(document, 'onmouseup', dragger.onDragEnd);

try {

//刪除拖動(dòng)時(shí)所用的屬性，兼容FF使用

delete dragger.onDrag;

delete dragger.onDragEnd;

} catch (e) {

//刪除拖動(dòng)時(shí)所用的屬性，兼容IE6使用

dragger.removeAttribute('onDrag');

dragger.removeAttribute('onDragEnd');

}

}

}

更多信息請(qǐng)查看IT技術(shù)專欄