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

maybe you're interested in scrollTo because I don't beleive draggable can move an object without mouse interaction? — TStamper, Apr 08 '09 at 15:08
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. — Jan, Apr 08 '09 at 19:42

score 13 · Accepted Answer · answered May 23 '11 at 00:07

13

Answers above seem overcomplicated.

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

answered May 23 '11 at 00:07

John Milmine

266
3
4

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. – Jan Oct 26 '12 at 16:20
1

+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. – Olson.dev Aug 22 '15 at 22:48

score 1 · Answer 2 · edited May 23 '17 at 11:53

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.

enter image description here

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

score 1 · Answer 3 · answered Apr 08 '09 at 15:09

1

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

answered Apr 08 '09 at 15:09

DMCS

31,720
14
71
104

That sounds too complex. Maybe this would be easier to accomplish with other libraries, then? Maybe prototype.js or something similar? – Jan Apr 08 '09 at 19:51
Go for it. If prototype can simulate mouse movement events, then it's going to be just as "difficult" as with yui. – DMCS Apr 09 '09 at 21:38

score 1 · Answer 4 · edited Oct 25 '11 at 08:58

1

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

edited Oct 25 '11 at 08:58

LPL

16,827
6
51
95

answered Oct 24 '11 at 20:36

ChangePictureWeekly

61
2

Jquery ui, call start drag manually

4 Answers4

Linked