Jquery ui, call start drag manually

Question

In Jquery UI I can configure an element as draggable by invoking

$("#drag").draggable();

But is there a way to start and stop the drag functions manually from another function? Ie

someOtherFunction = function() {
  $("#drag").startdrag();
}
yetAnotherFunction = function() {
  $("#drag").stopdrag();
}

Answer 1

Answers above seem overcomplicated.

$('.nonDraggableObjectWhichTriggersDrag').mousedown(function(e) {
    $('.draggableObject').trigger(e); 
});

Answer 2

Drag start is started via script looking at mouse events. mouse down followed by a mouse move. If you can simulate those mouse movements via Javascript (I don't know where, how, or even if this is possible), then it should fire off the start of a drag.

Note: just found that YUI has a way to simulate mouse moves and mouse clicks. Check out http://developer.yahoo.com/yui/yuitest/#useractions

Answer 3

to stop the dragging you just have to return false in the dragging callback, something like this:

$("#unlock-handle").draggable({axis:'x', containment:'parent', drag:onDrag});

...

var onDrag = function(e) {      
    if ($(this).position().left > 200) return false;
};

Hope it helps :-)

Answer 4

I didnt find a way to trigger dragging manually, but I have found a workaround for my similar situation.

I had this situation with two overlapping images (see image below), both partially transparent. In draggable's start(event) I wanted to check if it hits transparent pixels. If so, I looked under it for another element to see if that one was hit. And if it was, I wanted to initiate its dragging.

Solution? I reorder images on mousemove, and draggable is then triggered for that topmost image.

For pixel-precise element selection, see my another answer in: registering clicks on an element that is under another element