How to simulate a drag end event in Raphael JS?

Question

I'm using Raphael JS 2.0 and would like to simulate the end of a drag on another element and then remove the current element being handled. If it can be done using jquery that would be great as well.

Something like this:

var child = currentShift.data('endChild');
var newX = child.attr('x');
if (this !== currentShift)
{
    newX = child.attr('x')-day;
}
currentShift.attr({y: child.attr('y'), x: newX, height: child.attr('height')});
$(currentShift.node).mouseup();
child.remove();

I get errors because the child element is the this in the "move" part of a drag. But it is being used to interact with currentShift.

I know there are some other methods of getting a similar effect, but I would like to know if there is some way to imitate the drag end for an arbitrary element.

Answer 1

It looks like you can use a reference to your drag end function (in my case up) with call() just passing a reference (in my case currentShift) to your Raphael JS element. My code now looks like this:

var child = currentShift.data('endChild');
var newX = child.attr('x');
if (this!==currentShift)
{
    newX = child.attr('x')-day;
}
currentShift.attr({y: child.attr('y'), x: newX, height: child.attr('height')});
if (this !== currentShift)
    up.call(child);
else
    up.call(currentShift);
child.remove();

This still isn't doing exactly what I would like since, if the user keeps holding the mouse down, it attempts to call my drag move function even after the element has been removed (i.e. it isn't actually forcing the drag event to stop, it is just calling the up event and then giving a lot of non-fatal errors since the element doesn't exist any more when trying to call the move function.)

If anybody can provide an answer in the next few days as to how to force the drag to end (so no more calls are made to the move function), even if the user continues to hold the mouse down, I will accept that answer. Otherwise, I'll just accept this.