使用 Raphaeljs 停止拖放事件

Question

我正在尝试用 Raphaeljs 模拟 iPhone 的滑动事件。 为此，我使用拖放事件。

要模拟该事件，请在移动事件中使用一个方法来计算我的对象和鼠标位置之间的距离。如果鼠标经过该距离，我想停止拖放事件。这就是我被困住的地方。

这是代码：

var start = function (event) {
  },
  move = function (event) {
   inrange = self.inRange (circle.attr("cx"), circle.attr("cy"), event.pageX, event.pageY); 
      if(inrange == false){
         //Stop draging!
      }
   
  },
  up = function () {
    circle.animate({ r: 40, "stroke-width": 1 }, 200);
  };
  circle.drag(move, start, up);

在 move 方法中，我需要停止拖动事件或模拟鼠标悬停。我怎样才能这样做呢？

Answer 1

来自文档：

要取消绑定事件，请使用带有“un”前缀的相同方法名称，即 element.unclick(f);

和

要取消绑定拖动，请使用 unrag 方法。

所以我认为 circle.undrag(); 应该有效。

Answer 2

@Gregory您可以使用JS闭包来检测圆圈是否需要停止拖动。 @apphacker Raphael 中有一个已知问题，导致 undrag 无法工作。它计划在 2.0 中修复，但目前还没有发布日期（并且该 bug 并未在 beta 代码中修复，尽管票证上说已修复。

我建议手动实现 mousedown、mouseup 和 添加 JS 关闭检查，以查看圆圈是否需要停止拖动。

根据 @floyd 的建议，使用 jQuery 进行 mousemove 事件，并在移动函数中 '10，所以从那时起你可能已经继续前进了;)

Answer 3

如果您可以包含 jQuery，则可以在“mouseup”上使用 trigger。如果你不能包含 jQuery，也许只是看一下源代码并提升该功能？

更新

经过一些简短的谷歌搜索后，我发现了这个实现。不过仅在 Chrome 中进行了测试：

function fireEvent(element,event){
  if (document.createEventObject){
    // dispatch for IE
    var evt = document.createEventObject();
    return element.fireEvent('on'+event,evt)
  } else{
    // dispatch for firefox + others
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent(event, true, true ); // event type,bubbling,cancelable
    return !element.dispatchEvent(evt);
  }
}