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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3115 天前的主题，其中的信息可能已经有所发展或是发生改变。

首先祝各位端午安康！

下面先上Demo

然后是GitHub Repo

再然后npm

再来张图~

demo

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

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

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

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

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

blyde

Drag

拖拽

Demo

19 条回复 • 2016-06-10 10:51:01 +08:00

lslqtz

2016-06-09 16:47:47 +08:00 via iPhone

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

NekoTora

2016-06-09 16:51:43 +08:00

前排滋磁一个

DoraJDJ

2016-06-09 16:52:22 +08:00 via Android

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

2016-06-09 17:13:32 +08:00

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

ClassicOldSong

2016-06-09 17:15:02 +08:00

@fy 并不兼容。。。

2016-06-09 17:17:26 +08:00

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

ClassicOldSong

2016-06-09 17:37:03 +08:00 via Android

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

wujunze

2016-06-09 17:40:59 +08:00

不错哦 mark

loading

2016-06-09 17:45:20 +08:00 via Android

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

但是强推 blyde …

2016-06-09 18:27:54 +08:00

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

ClassicOldSong

2016-06-09 18:56:41 +08:00

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

garipan

2016-06-09 19:19:31 +08:00

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

popu111

2016-06-09 20:11:34 +08:00

（强行）前排围观 dalao

fhefh

2016-06-09 20:17:28 +08:00

mark

ClassicOldSong

2016-06-09 20:36:56 +08:00

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

iTakeo

2016-06-09 21:28:35 +08:00 via iPhone

有 bug 啊，移动端都错位了

ClassicOldSong

2016-06-09 21:49:30 +08:00

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

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

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

lslqtz

2016-06-10 06:29:00 +08:00

试了 demo ，很好用。

quericy

2016-06-10 10:51:01 +08:00

兹磁一下，前排围观老宋