github地址:https://github.com/qiangzi772…
目前這個庫的相容做到了相容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介面,讓移動元素總在最頂層。