V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
0f2e3z8n4z
V2EX  ›  程序员

前端自定义拖拽如何封装鼠标事件?

  •  
  •   0f2e3z8n4z · 2017-03-28 15:42:34 +08:00 · 1988 次点击
    这是一个创建于 2557 天前的主题,其中的信息可能已经有所发展或是发生改变。

    百度 ife2017 里面有这么一道题,实现一个图片裁剪器。

    传送门 http://ife.baidu.com/course/detail/id/37

    我的疑问是关于这个裁剪框。

    我的需求:

    这个裁剪框是拖拽生成出来的,可以通过边框上的点拖拽改变高度和宽度,可以移动。

    我的思路:

    自然是绑定相应相应的事件。 mousedown , mousemove , mouseup 。

    1. 拖拽框的父元素应该绑定三个事件 down , move , up 。没毛病。 2.拖拽框自身也要绑定事件,同上。 3.拖拽框上的调整点也要绑定事件吧,因为要通过拖动改变大小 3.都使用事件冒泡

    问题:

    1. 然后我发现写的 function Clipper(){}里面有一大坨 element.addEventListener(),这个应该怎么写才优雅?
    2. 然后我上 github 上看看类似的代码,发现有一些是把 move 和 up 事件都绑定到 document , down 事件绑定到元素上。这样做应该会有优化?
    3. 还有,绑定完的事件在 mouseup 的时候是不是要移除掉?
    4. 我还看到有人把 move 这个事件嵌套到 down 事件的回调函数里面,这样写是正确的吗,这样写,是不是因为出于要 down 了才能 move 这个原因?绑定事件还要看时机?

    暂时不考虑 H5 的 drag and drop

    所以应该怎么样写才好?

    谢谢大家 : )

    3 条回复    2017-03-29 11:16:02 +08:00
    0f2e3z8n4z
        1
    0f2e3z8n4z  
    OP
       2017-03-28 17:15:06 +08:00
    Clipper 是我封装的图片裁剪器
    otakustay
        2
    otakustay  
       2017-03-28 22:10:05 +08:00 via iPhone
    拖拽的思路都是 mousedown 绑在要拖的元素上,触发时在 document 上绑定 mousemove 和 mouseup , up 时注销 document 上的事件,这样保证不会鼠标动太快移出元素事件丢失
    另外 ie 有 setCapture 功能, ff 有类似的,自己搜吧
    0f2e3z8n4z
        3
    0f2e3z8n4z  
    OP
       2017-03-29 11:16:02 +08:00
    @otakustay 好的 thx
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5329 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 09:21 · PVG 17:21 · LAX 02:21 · JFK 05:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.