中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

這段代碼詳細講述了JS拖拽的原理和方法，值得學習和借鑒。

/**

* 跨平臺的事件監聽函數

* @param {Node} node 需要監聽事件的DOM節點

* @param {String} eventType 需要監聽的事件類型

* @param {Function} callback 事件監聽回調函數

* @type Function 返回值為函數類型

* @return 返回監聽回調函數的引用，用于釋放監聽

*/

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;

}

/**

* 跨平臺的事件監聽卸載函數

* @param {Node} node 需要卸載監聽事件的DOM節點

* @param {String} eventType 需要卸載監聽的事件類型

* @param {Function} callback 卸載事件監聽回調函數

*/

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);

}

}

/**

* 兼容不同定位方式的通用拖動接口

* @param {Node} dragger 需要被拖動的元素

*/

//必須告訴系統，哪些元素是可以進行交互，而哪些是不行

function canDrag(dragger) {

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

//兼容事件對象

e = e || event;

//兼容坐標屬性

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

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

//兼容樣式對象

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

//當沒有設置left和top屬性時，IE下默認值為auto

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

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

//獲取鼠標相對于元素的間距

var offXL = pageX - offX;

var offYL = pageY - offY;

//為dragger增加onDrag屬性，用來存儲拖動事件

if (!dragger.onDrag) {

//監聽拖動事件

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

e = e || event;

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

var y = e.clientY || e.pageY

//設置X坐標

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

//設置Y坐標

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

});

//監聽拖動結束事件

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

//釋放前讀取事件對象

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

var y = e.clientY || e.pageY

//釋放拖動監聽和結束監聽

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

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

try {

//刪除拖動時所用的屬性，兼容FF使用

delete dragger.onDrag;

delete dragger.onDragEnd;

} catch (e) {

//刪除拖動時所用的屬性，兼容IE6使用

dragger.removeAttribute('onDrag');

dragger.removeAttribute('onDragEnd');

}

});

}

});

return function() {

//返回一個可以取消拖動功能的函數引用

//釋放拖動監聽和結束監聽

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

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

try {

//刪除拖動時所用的屬性，兼容FF使用

delete dragger.onDrag;

delete dragger.onDragEnd;

} catch (e) {

//刪除拖動時所用的屬性，兼容IE6使用

dragger.removeAttribute('onDrag');

dragger.removeAttribute('onDragEnd');

}

}

}

更多信息請查看IT技術專欄