博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
开源自己写的一个拖拽库,兼容到IE8+
阅读量:5155 次
发布时间:2019-06-13

本文共 1561 字,大约阅读时间需要 5 分钟。

github地址:

目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试。库里面写了很多的注释,对于想看源码的同学是一个很好的选择。如果觉得不错可以到github上点个star,谢谢各位了。

库的思路部分参考draggabilly的实现,但是因为draggabilly也依赖了几个小的库,导致源码有点臃肿,作者也没去优化,所以我就有个这个想法,写一个新的拖拽库,兼容到IE8。

Draggable

打造跨平台的轻量级原生拖拽库

Summary

自己写的一个拖拽库,基于原生JS实现,无任何依赖,同时还做了IE8的兼容,在IE8的情况下transform回退到position实现。拖拽的动画通过绑定在render函数上的requestAnimationFrame实现而不是使用mousemove回调。另外库里面还写了很多的注释,方便对源码的解读与交流。如果你觉得这个库写的不错或者有值得学习的经验不妨点下右上角的star,谢谢各位。

Install

直接从src文件夹中引入即可

Usage

可以直接传入选择器

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

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://www.cnblogs.com/jelly7723/p/6857211.html

你可能感兴趣的文章
20145239杜文超 《Java程序设计》第7周学习总结
查看>>
冒泡排序(C实现)
查看>>
Swift -> RunTime(动态性) 问题 浅析
查看>>
<虚树+树型DP> SDOI2011消耗战
查看>>
算法啊算法
查看>>
安装完Anaconda python 3.7,想使用python3.6方法
查看>>
有意公司可联系我,我会提交我的简历!
查看>>
组播协议——IGMP v2报文头介绍
查看>>
微信小程序之----问题
查看>>
thinkphp整合Ueditor编辑器
查看>>
小程序
查看>>
oracle汇编03
查看>>
UITextInputMode
查看>>
hdu 3790 最短路径问题
查看>>
hdu 3105 Fred's Lotto Tickets (水)
查看>>
C# 获取进程或线程的相关信息
查看>>
xcode调试打印QString
查看>>
Windows 7 常用快捷键 命令
查看>>
Servlet学习总结
查看>>
java求两个数组的并集、交集、差集
查看>>