使用 Raphael Js 停止拖放事件答案

【问题标题】：Stop drag-n-drop event with Raphaeljs使用 Raphael Js 停止拖放事件
【发布时间】：2010-11-04 13:15:24
【问题描述】：

我正在尝试使用 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);

在移动方法中，我需要停止拖动事件或模拟mouseup。我该怎么做？

【问题讨论】：

您正试图立即阻止 circle 被进一步拖动 - 对吗？
您介意提供一个jsfiddle 来显示您当前的代码吗？
这里是jsfiddle.net/9v2Rs
嗯，我不能说我理解它应该做什么和它现在正在做什么。
我添加了几行。在非范围条件下，它必须停止移动事件，因为在我的真实代码中，我从鼠标的最后一个位置计算东西。

标签： javascript dom-events raphael

【解决方案1】：

来自documentation：

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

和

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

所以我认为circle.undrag(); 应该可以工作。

【讨论】：

我已经查看了文档并尝试过，但它似乎不起作用。
是的，@Gregory 的评论。这将停止未来的拖动事件触发。这不会导致当前拖动停止。
那么 event.preventDefault() 可能会阻止项目进一步移动并且用户将放弃拖动。
@apphacker 查看我的答案 - Raphael 中存在一个已知的 undrag 错误

【解决方案2】：

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

我建议按照@floyd 的建议，使用 jQuery 手动实现 mousedown、mouseup 和 mousemove 事件，并在你的 move 函数中添加一个 JS 闭包检查，以查看圆圈是否需要停止被拖动。'

我还想到你的原始帖子最后一次编辑是在 10 年 11 月，所以你可能从那时起就继续前进了；）

【讨论】：

【解决方案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);
  }
}

【讨论】：