javascript - RaphaelJS/Snap.SVG 拖动事件?

标签 javascript raphael

Raphaël(及其继任者 Snap)都有一个 drag()方法( RaphaëlSnap ),两者都声称:

Additionally following drag events will be triggered: drag.start.<id> on start, drag.end.<id> on end and drag.move.<id> on every move. When element will be dragged over another element drag.over.<id> will be fired as well.

问题是,那些额外的事件是在什么上触发的?我试过 document.addEventListener('drag.move.0')paper.node.addEventListener('drag.move.0')似乎都没有被触发。我需要监听哪些对象才能获得这些全局拖动事件?

最佳答案

好吧,我自己研究了源代码,发现它有点困惑,正如 Ian 所想的那样。首先,在 Snap 中,事件名称更改为具有 snap. 前缀 ( source )。

查看该源代码,Snap 使用自己的事件库(“Eve”),它根本不使用 native 监听器,因此事件未绑定(bind)到任何对象,它们只是为事物命名空间您有兴趣了解:

eve.on('snap.drag.start.0', function(el) {
  console.log('Item 0 started dragging!');
});

传递给监听器的参数要么是传递给原始 drag() 调用的 start_scope,要么是被拖动的元素(如果当时未设置) .

eve 库在其作用域内允许使用通配符,例如:

eve.on('snap.drag.start.*', function(el) {
  console.log('Item ' + el.id + ' started dragging!');
});

应该可以监听所有拖动 Action 。

关于javascript - RaphaelJS/Snap.SVG 拖动事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23741960/

相关文章:

javascript - 从变量对象中删除 DOM 元素以将其发布到服务器

javascript - iPad Safari 在 raphael.js 中解析路径字符串时崩溃

javascript - 开发实时协作绘图系统

javascript - 缩放 SVG 图像以适合父级并在不同情况下更改仪表颜色

javascript - 尝试使用动态创建的输入元素序列化表单,但未发布元素的值

javascript - React 无法读取未定义的属性 'bind'

javascript - Jqgrid 自定义格式化程序按钮单击不起作用

javascript - AngularJS 全局 $http 超时

javascript - 如何制作这个加载动画?

javascript - 使用@font-face 时 SVG node.getBBox 不正确