Drag.js - 一个超级可爱的拖拽特效插件

[ClassicOldSong]

首先祝各位端午安康！

下面先上Demo

然后是GitHub Repo

再然后npm

再来张图~

参考 FL Studio 的拖拽动画效果自己撸了一个 js 版的出来。。。不得不说 Image Line 出品的软件 UI 都超级赞

这大概是我写的最难用的插件了吧。。。。然而也是使用最灵活的一个。。

流畅度很高，即使在 MTK 设备上也能够有比较流畅的效果。

Drag.js 依赖 Blyde ， 关于 Blyde 请参见Blyde 的发布帖。自己写的框架用起来就是舒服 23333 （当然看得懂源码的话也可以改成原生插件或者 jQuery 插件，并不复杂）

欢迎各位使用，希望各位能够喜欢，当然也欢迎 Issue 以及 PR ，啊对了，欢迎回复 2333333333333333

[lslqtz]

又是你，前排。晚一点回去试试看。

[NekoTora]

前排滋磁一个

[DoraJDJ]

看上去很不错，不过巨大的 gif 图把我电脑搞卡了 :(

[fy]

话说问题来了，引入了 blyde 之后，是否兼容 jquery 呢？

[ClassicOldSong]

@fy 并不兼容。。。

[fy]

@ClassicOldSong = = 这就是一个悲伤的故事了

[ClassicOldSong]

@fy 然而 Blyde 其实也很好用的说。。。

[wujunze]

不错哦 mark

[loading]

看到效果，大概能想出实现方式，赞想法！

但是强推 blyde …

[fy]

@ClassicOldSong 主要是不好塞进一些旧项目里面。要考虑个人的使用，也要考虑历史的进程嘛

[ClassicOldSong]

@fy 或者我直接把 Blyde 在里面塞一份定制版。。。。。。。

[garipan]

Blyde 有开发者论坛吗 或者基础教学（资源丰富）的网站

[popu111]

（强行）前排围观 dalao

[fhefh]

mark

[ClassicOldSong]

@garipan Blyde 是我自己写的。。。。。目前没啥人用。。。。所有的资料都在 Blyde 的 README 里了。。。

[iTakeo]

有 bug 啊，移动端都错位了

[ClassicOldSong]

@iTakeo 移动端的问题最多是 Demo 的问题。。。偏移量是故意添加的为了防止触发事件的对象不对头。。。。而且偏移同时包含了 margin 的距离。。

解释一下移动端为何看起来有 Bug ：移动端的 touchend 事件的触发对象无论如何都指向 touchstart 时的触发对象，然而 drop 是需要在目标容器上触发的，所以我在下面写了一小行字，翻译过来就是“在移动端上你可能需要点击目标容器才能释放”。并且如果加入全局 touchend 事件的话，移动端看起来就是元素无论如何都会回到原来的位置上而不是落在目标容器里，所以我只能通过文字提醒正确的尝试方法。其实想解决的话有很多方法，比如判断松手时手指的位置是否在容器上方之类的，但是这样做的话 demo 的代码大部分就变成处理事件触发了，而不能给予一个关于 Drag.js 明确的使用示例。

顺便，这个偏移量在 FL Studio 里也是存在的

[lslqtz]

试了 demo ，很好用。

[quericy]

兹磁一下，前排围观老宋