github 地址:https://github.com/qiangzi7723/draggable
目前这个库的兼容做到了兼容 IE8,所以如果需要兼容 IE8 的朋友不妨试试。库里面写了很多的注释,对于想看源码的同学是一个很好的选择。如果觉得不错可以到 github 上点个 star,谢谢各位了。 库的思路部分参考 draggabilly 的实现,但是因为 draggabilly 也依赖了几个小的库,导致源码有点臃肿,作者也没去优化,所以我就有个这个想法,写一个新的拖拽库,兼容到 IE8。
打造跨平台的轻量级原生拖拽库
自己写的一个拖拽库,基于原生 JS 实现,无任何依赖,同时还做了 IE8 的兼容,在 IE8 的情况下
回退到
- transform
实现。拖拽的动画通过绑定在
- position
函数上的
- render
实现而不是使用
- requestAnimationFrame
回调。另外库里面还写了很多的注释,方便对源码的解读与交流。如果你觉得这个库写的不错或者有值得学习的经验不妨点下右上角的
- mousemove
,谢谢各位。
- star
直接从
文件夹中引入即可
- src
- <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]);
- }
- new Draggable('#app', {
- parentMove: '#container',
- backToPosition: false,
- axis: 'x',
- grid: {
- x: 40
- },
- addClassName: 'is-dragging',
- cursorCancel: false,
- });
默认的拖拽动画是通过
属性实现的,所以如果想使用
- transform
属性实现拖拽动画可以使用该参数
- position
- new Draggable('#app',{
- backToPosition:true
- });
在 IE8 下会自动使用
实现拖拽
- position
通过设置
可以设置移动的父元素,如
- parentMove
- new Draggable('#app',{
- parentMove:'#container'
- });
表明当点击
元素时,
- app
元素不会被拖拽,拖拽移动的是整个的
- app
元素,这个 API 在需要定义顶部拖拽条的时候很有用
- container
设置该参数表明只允许某个方向可拖拽
- new Draggable('#app',{
- axis:'x'
- });
设置拖拽的时候移动的单位
- new Draggable('#app', {
- grid: {
- x: 40,
- y: 40
- }
- });
为拖拽的过程添加
,方便增加拖拽样式
- className
- new Draggable('#app',{
- addClassName:'is-dragging'
- });
在初始化的时候默认为可拖拽的元素添加
属性,如果需要取消可以
- cursor:move
- new Draggable('#app',{
- cursorCancel:true
- });
来源: http://www.cnblogs.com/jelly7723/p/6857211.html