開源本身寫的一個拖拽庫，兼容到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接口，讓移動元素總在最頂層。