開源自己寫的一個拖拽庫，相容到IE8

上啊比卡丘發表於2019-02-16

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介面，讓移動元素總在最頂層。

相關文章