JavaScript實現拖拽網頁內元素的方法

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 /** * 跨平台的事件監聽函數 * @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'); } } }