开源自己写的一个拖拽库，兼容到IE8

2024年2月6日 129次阅读 来源: 上啊比卡丘

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

    原文作者：上啊比卡丘
    原文地址: https://segmentfault.com/a/1190000009424737
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞