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

20171112 发布于2019-08-01 16:50 / 3154人阅读

摘要：打造跨平台的轻量级原生拖拽库自己写的一个拖拽库，基于原生实现，无任何依赖，同时还做了的兼容，在的情况下回退到实现。

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

可以直接传入选择器

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

服务器托管私有云拖拽库 ie8兼容性 ie8不兼容js哪些 ie8中js不兼容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50776.html

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

摘要：打造跨平台的轻量级原生拖拽库自己写的一个拖拽库，基于原生实现，无任何依赖，同时还做了的兼容，在的情况下回退到实现。 github地址：https://github.com/qiangzi772... 目前这个库的兼容做到了兼容IE8，所以如果需要兼容IE8的朋友不妨试试。库里面写了很多的注释，对于想看源码的同学是一个很好的选择。如果觉得不错可以到github上点个star，谢谢各位了。...

fxp 2019-08-20 16:33 评论0 收藏0
开源自己写的图片转Ascii码图工具

摘要：地址如果觉得不错可以给个或者提出你的建议，基于的图片转示意图。瓶颈目前项目的瓶颈存在于这个插件，把图片转成码在浏览器中输出是十分快速的，但是后期将输出的码转换成图片时，使用了插件，这个插件在转换图片的过程中十分缓慢，导致最后的输出缓慢。 GitHub地址：https://github.com/qiangzi772... 如果觉得不错可以给个star或者提出你的建议 img2Ascii...

Yangyang 2019-08-20 17:53 评论0 收藏0
开源自己写的图片转Ascii码图工具

摘要：地址如果觉得不错可以给个或者提出你的建议，基于的图片转示意图。瓶颈目前项目的瓶颈存在于这个插件，把图片转成码在浏览器中输出是十分快速的，但是后期将输出的码转换成图片时，使用了插件，这个插件在转换图片的过程中十分缓慢，导致最后的输出缓慢。 GitHub地址：https://github.com/qiangzi772... 如果觉得不错可以给个star或者提出你的建议 img2Ascii...

宠来也 2019-08-01 17:07 评论0 收藏0