js實現的dom元素拖動封裝外掛程式碼例項
在實際應用中經常會有對元素進行拖動的需求,下面就是一個對此功能的封裝程式碼。
需要的朋友可以做一下參考,程式碼如下:
[JavaScript] 純文字檢視 複製程式碼/** * 相容不同定位方式的通用拖動介面 * @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'); } } }
相關文章
- js物件導向封裝拖動效果程式碼例項JS物件封裝
- js實現的div拖動效果例項程式碼JS
- js實現的元素運動程式碼例項JS
- js實現的獲取指定元素的節點封裝程式碼例項JS封裝
- jQuerydiv元素拖動效果程式碼例項jQuery
- js通過拖動調整元素位置程式碼例項JS
- js實現的元素抖動效果程式碼例項JS
- js實現的通過拖動調整元素間的相對位置程式碼例項JS
- 通過拖動實現調整元素之間位置程式碼例項
- javascript獲取元素封裝程式碼例項JavaScript封裝
- js實現彈出灰色背景能夠拖動的視窗例項程式碼JS
- 滑鼠拖動實現將div放入方格例項程式碼
- js元素的震動效果程式碼例項JS
- 拖動滾動條實現div跟隨效果程式碼例項
- react專案中實現元素的拖動和縮放例項React
- jquery外掛實現圖片可拖動的購物車程式碼jQuery
- js元素上下移動效果程式碼例項JS
- js動態連結<a>元素程式碼例項JS
- js動態建立HTML元素程式碼例項JSHTML
- js實現li元素隔行背景變色例項程式碼JS
- 可以拖動的div塊程式碼例項
- javascript實現的多元素緩衝運動程式碼例項JavaScript
- js實現的文字垂直滾動例項程式碼JS
- js獲取元素的實際尺寸程式碼例項JS
- jQuery實現的元素抖動外掛jQuery
- jquery tip外掛程式碼例項jQuery
- js實現的div元素尺寸彈性縮放效果程式碼例項JS
- SVG拖動繪製矩形程式碼例項SVG
- 拖動滾動條實現網頁內容自動載入程式碼例項網頁
- js實現jquery的extend()程式碼例項JSjQuery
- js實現的警告框例項程式碼JS
- 編寫自己的程式碼庫(javascript常用例項的實現與封裝)JavaScript封裝
- javascript實現的動態設定元素透明度程式碼例項JavaScript
- 移動端div塊拖動效果程式碼例項
- javascript實現的交換li元素的位置程式碼例項JavaScript
- javascript字串操作程式碼封裝程式碼例項JavaScript字串封裝
- js元素挨個掉落程式碼例項JS
- js刪除li元素程式碼例項JS