Question

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

为了模拟事件，在move事件中有一个方法来计算我的对象和鼠标位置之间的距离。如果鼠标在该距离之后，我想停止拖放事件。这就是我被困住的地方。

以下是代码：

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);

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

格雷格

Answer 1

来自documentation：

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

和

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

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

Answer 2

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

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

我发现你原来的帖子是在2010年11月最后一次编辑的，所以你可能从那时起就开始了;）

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);
  }
}

使用Raphael Js停止拖放事件

3 个答案: