这是一个创建于 2821 天前的主题，其中的信息可能已经有所发展或是发生改变。
百度 ife2017 里面有这么一道题，实现一个图片裁剪器。
传送门 http://ife.baidu.com/course/detail/id/37
我的疑问是关于这个裁剪框。
我的需求：
这个裁剪框是拖拽生成出来的，可以通过边框上的点拖拽改变高度和宽度，可以移动。
我的思路：
自然是绑定相应相应的事件。 mousedown ， mousemove ， mouseup 。
- 拖拽框的父元素应该绑定三个事件 down ， move ， up 。没毛病。 2.拖拽框自身也要绑定事件，同上。 3.拖拽框上的调整点也要绑定事件吧，因为要通过拖动改变大小 3.都使用事件冒泡
问题：
- 然后我发现写的 function Clipper(){}里面有一大坨 element.addEventListener()，这个应该怎么写才优雅？
- 然后我上 github 上看看类似的代码，发现有一些是把 move 和 up 事件都绑定到 document ， down 事件绑定到元素上。这样做应该会有优化？
- 还有，绑定完的事件在 mouseup 的时候是不是要移除掉？
- 我还看到有人把 move 这个事件嵌套到 down 事件的回调函数里面，这样写是正确的吗，这样写，是不是因为出于要 down 了才能 move 这个原因？绑定事件还要看时机？
暂时不考虑 H5 的 drag and drop
所以应该怎么样写才好？
谢谢大家 : )
 |
1
0f2e3z8n4z OP Clipper 是我封装的图片裁剪器
|
 |
2
otakustay 2017-03-28 22:10:05 +08:00 via iPhone
拖拽的思路都是 mousedown 绑在要拖的元素上，触发时在 document 上绑定 mousemove 和 mouseup ， up 时注销 document 上的事件，这样保证不会鼠标动太快移出元素事件丢失
另外 ie 有 setCapture 功能， ff 有类似的，自己搜吧 |
|
3
0f2e3z8n4z OP @otakustay 好的 thx
|
Select Language