開源自己寫的一個拖拽庫,兼容到IE8+


github地址:https://github.com/qiangzi7723/draggable

目前這個庫的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨試試。庫里面寫了很多的注釋,對於想看源碼的同學是一個很好的選擇。如果覺得不錯可以到github上點個star,謝謝各位了。
庫的思路部分參考draggabilly的實現,但是因為draggabilly也依賴了幾個小的庫,導致源碼有點臃腫,作者也沒去優化,所以我就有個這個想法,寫一個新的拖拽庫,兼容到IE8。

Draggable

打造跨平台的輕量級原生拖拽庫

Summary

自己寫的一個拖拽庫,基於原生JS實現,無任何依賴,同時還做了IE8的兼容,在IE8的情況下transform回退到position實現。拖拽的動畫通過綁定在render函數上的requestAnimationFrame實現而不是使用mousemove回調。另外庫里面還寫了很多的注釋,方便對源碼的解讀與交流。如果你覺得這個庫寫的不錯或者有值得學習的經驗不妨點下右上角的star,謝謝各位。

Install

直接從src文件夾中引入即可

Usage

<div id='app'></div>

可以直接傳入選擇器

new Draggable('#app');

或者傳入DOM節點

var elem=document.querySelector('#app');
new Draggable(elem);

如果需要為多個元素添加拖拽,請循環遍歷

var elem=document.querySelectorAll('.app');
for(var i=0,len=elem.length;i<len;i++){
    new Draggable(elem[i]);
}

API

API一覽

new Draggable('#app',{
    parentMove:'#container',
    backToPosition:false,
    axis:'x',
    grid:{x:40},
    addClassName:'is-dragging',
    cursorCancel:false,
});

backToPosition

默認的拖拽動畫是通過transform屬性實現的,所以如果想使用position屬性實現拖拽動畫可以使用該參數

new Draggable('#app',{
    backToPosition:true
});

在IE8下會自動使用position實現拖拽

parentMove

通過設置parentMove可以設置移動的父元素,如

new Draggable('#app',{
    parentMove:'#container'
});

表明當點擊app元素時,app元素不會被拖拽,拖拽移動的是整個的container元素,這個API在需要定義頂部拖拽條的時候很有用

axis

設置該參數表明只允許某個方向可拖拽

new Draggable('#app',{
    axis:'x'
});

grid

設置拖拽的時候移動的單位

new Draggable('#app',{
    grid:{x:40,y:40}
});

addClassName

為拖拽的過程添加className,方便增加拖拽樣式

new Draggable('#app',{
    addClassName:'is-dragging'
});

cursor

在初始化的時候默認為可拖拽的元素添加cursor:move屬性,如果需要取消可以

new Draggable('#app',{
    cursorCancel:true
});

后期版本迭代

  • 增加AMD規范。
  • 增加事件綁定接口。
  • 添加完善的錯誤輸出,方便調試。
  • 加上zIndex接口,讓移動元素總在最頂層。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM