CODEWITHSUNDEEP
javascriptdom-eventsraphael
Gregory
Gregory

Reputation: 569

Stop drag-n-drop event with Raphaeljs

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?

Upvotes: 1

Views: 2417

Answers (3)

aaronsnoswell
aaronsnoswell

Reputation: 6261

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

Upvotes: 1

tfwright
tfwright

Reputation: 2973

If you can include jQuery you can use trigger on "mouseup." If you can't include jQuery maybe just take a look at the source and lift that one function?

UPDATE

After some brief googling I came across this implementation. Only tested in in Chrome though:

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

Upvotes: 0

Bjorn
Bjorn

Reputation: 71900

From the documentation:

To unbind events use the same method names with “un” prefix, i.e. element.unclick(f);

and

To unbind drag use the undrag method.

So I would think circle.undrag(); should work.

Upvotes: 3

Related Questions