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接口,讓移動元素總在最頂層。