Stop drag-n-drop event with Raphaeljs

Question

I am trying to simulate the swipe event from the iPhone with Raphaeljs. To do so, I am using the drag and drop event.

To simulate the event in have a method in the move event that calculate the distance between my object and the mouse position. If the mouse goes after that distance I want to stop the drag and drop event. This is where I'm stuck.

Here is the code:

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

In the move method I need the stop the drag event or simulate a mouseup. How can I do so?

Answer 1

@Gregory You can use a JS closure to detect if the circle needs to stop dragging. And @apphacker there is a known issue in Raphael that prevents undrag from working. It is scheduled to be fixed in 2.0, but that doesn't have a release date as of yet (and the bug isn't fixed in the beta code, despite the ticket saying it is.

I recommend manually implementing the mousedown, mouseup and mousemove events using jQuery, as per @floyd's recommendation, and add a JS closure check in your move function to see if the circle needs to stop being dragged yet or not.'

It also occurs to me that your original post was last edited in Nov '10, so you might have moved on since then ;)