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接口,让挪动元素总在最顶层。