V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
ClassicOldSong

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

  •  1
     
  •   ClassicOldSong · Jun 9, 2016 · 8438 views
    This topic created in 3619 days ago, the information mentioned may be changed or developed.

    首先祝各位端午安康!

    下面先上Demo

    然后是GitHub Repo

    再然后npm

    再来张图~

    demo

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

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

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

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

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

    19 replies    2016-06-10 10:51:01 +08:00
    lslqtz
        1
    lslqtz  
       Jun 9, 2016 via iPhone
    又是你,前排。晚一点回去试试看。
    NekoTora
        2
    NekoTora  
       Jun 9, 2016
    前排滋磁一个
    DoraJDJ
        3
    DoraJDJ  
       Jun 9, 2016 via Android
    看上去很不错,不过巨大的 gif 图把我电脑搞卡了 :(
    fy
        4
    fy  
       Jun 9, 2016
    话说问题来了,引入了 blyde 之后,是否兼容 jquery 呢?
    ClassicOldSong
        5
    ClassicOldSong  
    OP
       Jun 9, 2016
    @fy 并不兼容。。。
    fy
        6
    fy  
       Jun 9, 2016
    @ClassicOldSong = = 这就是一个悲伤的故事了
    ClassicOldSong
        7
    ClassicOldSong  
    OP
       Jun 9, 2016 via Android
    @fy 然而 Blyde 其实也很好用的说。。。
    wujunze
        8
    wujunze  
       Jun 9, 2016
    不错哦 mark
    loading
        9
    loading  
       Jun 9, 2016 via Android
    看到效果,大概能想出实现方式,赞想法!

    但是强推 blyde …
    fy
        10
    fy  
       Jun 9, 2016
    @ClassicOldSong 主要是不好塞进一些旧项目里面。要考虑个人的使用,也要考虑历史的进程嘛
    ClassicOldSong
        11
    ClassicOldSong  
    OP
       Jun 9, 2016
    @fy 或者我直接把 Blyde 在里面塞一份定制版。。。。。。。
    garipan
        12
    garipan  
       Jun 9, 2016
    Blyde 有开发者论坛吗 或者基础教学(资源丰富)的网站
    popu111
        13
    popu111  
       Jun 9, 2016
    (强行)前排围观 dalao
    fhefh
        14
    fhefh  
       Jun 9, 2016
    mark
    ClassicOldSong
        15
    ClassicOldSong  
    OP
       Jun 9, 2016
    @garipan Blyde 是我自己写的。。。。。目前没啥人用。。。。所有的资料都在 Blyde 的 README 里了。。。
    iTakeo
        16
    iTakeo  
       Jun 9, 2016 via iPhone
    有 bug 啊,移动端都错位了
    ClassicOldSong
        17
    ClassicOldSong  
    OP
       Jun 9, 2016
    @iTakeo 移动端的问题最多是 Demo 的问题。。。偏移量是故意添加的为了防止触发事件的对象不对头。。。。而且偏移同时包含了 margin 的距离。。

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

    顺便,这个偏移量在 FL Studio 里也是存在的
    lslqtz
        18
    lslqtz  
       Jun 10, 2016
    试了 demo ,很好用。
    quericy
        19
    quericy  
       Jun 10, 2016
    兹磁一下,前排围观老宋
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5536 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 57ms · UTC 01:30 · PVG 09:30 · LAX 18:30 · JFK 21:30
    ♥ Do have faith in what you're doing.