开源本身写的一个拖拽库，兼容到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接口，让移动元素总在最顶层。