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

Elnoraelnore

maybe you're interested in scrollTo because I don't beleive draggable can move an object without mouse interaction? – Jameyjami

I never said I don't want to use the mouse. I have to invoke the drag outside the div because it should be initiated from within a Flash file using FScommand. – Elnoraelnore

Answer 1

Answers above seem overcomplicated.

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

Sidecar

I'm not quite sure that this would have worked in my original project (since it involved Flash and fsCommand), but it's the closest to a working solution that's been posted. In the project I ended up putting the draghandler above the Flash file, and putting divs over the flash buttons calling the flash commands through fsCommand. Not pretty but it worked. – Elnoraelnore

+1 -- I know this comment is a bit late but triggerHandler(e) should probably be used instead. When I used trigger, I ended up with a stack overflow because of the way I had other functions/DOM hooked up. Changing it to triggerHandler resolved this issue because no bubbling occurred. triggerHandler will also be more efficient. – Leporid

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

Nalepka

That sounds too complex. Maybe this would be easier to accomplish with other libraries, then? Maybe prototype.js or something similar? – Elnoraelnore

Go for it. If prototype can simulate mouse movement events, then it's going to be just as "difficult" as with yui. – Nalepka

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

Ormolu

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

Encase