jQuery How to fire the drag event while mouse is still down

javascript jquery jquery-ui dom

11,532

Solution 1

Final edit. Here is the functionality you want. I had to modify your code a lot but this does what you want it to do. You need to pass the mousedown event you are firing into a trigger on the added div. Here is the new jsfiddle

This should be your html

<html>
<head>  
</head>
<body>
<div id="page_wrap">
<div class="demo" style="width: 300px; height: 200px; background-color: blue; overflow-y: auto; overflow-x: hidden;">
<div id="inactive_dragable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
Lorem ipsum dolor sit amet...</div>
</div>
</body>
</html>

Here is your javascript

$(".demo").mousedown(function (e){
    var isIE = document.all ? true : false;
        var _x,_y;
        if (!isIE) {
            _x = e.pageX;
            _y = e.pageY;
        }
        if (isIE) {
            _x = e.clientX + document.body.scrollLeft;
            _y = e.clientY + document.body.scrollTop;
        }
        var boundry = $('#page_wrap').offset();
        $('<div/>', {
            id: 'tester',
        }).addClass('test_drag')
        .html("New div to drag")
        .css("top", _y + "px")
        .css("left", _x + "px")
        .draggable()                 
        .appendTo('#page_wrap');
        $("#tester").trigger(e); //this is the important line, that triggers the drag
});

And your CSS

#inactive_dragable { width: 50px; height: 50px; padding: 0.5em; background-color: green; }
.test_drag { width: 50px; height: 50px; padding: 0.5em; background-color: red; position: absolute; }

Solution 2

ok. after reading your comments i think i understand what you are trying to do, however i dont think there is a "start drag" method which we can use in jquery.

but how about this, instead of binding a mousedown event on div A which creates the new div B and then trying to drag div B, why not remove the mousedown event altogether and replace it with a draggable event, and fire off some code at the beginning of the drag event.

for example:

$(".selector").draggable({
  appendTo:'body',
  addClasses:'',
  scroll:false,
  start:function(){
    //your code here
    //eg:
    $(this).html('something else');
  }
});

the addClasses bit can change the appearance of your div, and the start event can fire off some code to alter div A (which you are now dragging) to appear like your intended div B.

EDIT: the scroll:false bit should get around the problems you are having with the "overflow:auto" parent div.

its a bit of a work around, but should give you the functionality you are after (assuming i understand you correctly this time!! :)

Solution 3

The above answers are better because they're discussing doing it the correct way. However, to literally answer your question, you can trigger the mousedown event as such...

$("div#divID").trigger("mousedown");

11,532

Author by

Ally

[email protected]

Updated on June 05, 2022

Comments

Ally almost 2 years

Ok I've been playing around with this for hours now and still no dice. I'm creating an interface allowing you to drag and drop an icon(a div with an image inside). I'm using the jQuery UI scripts for they're tried and tested div dragging functionality.

My problem is you can not drag a div outside it's parent div. To get around this I'm creating a dragable div, appended to the document body, on demand when a user fires a mousedown event. But I can't figure out how to fire off the drag event needed so the user can immediately start dragging this newly created div around.

In short I need to; mouse down -> call function to create draggable div -> drag the div around while the mouse is still down.

I'm sure it's something simple. Any help would be much appreciated.

Here is an example of my problem, all it needs to run are the jQuery UI scripts which can be found at the link above.

<html>
<head>
    <script src="../../jquery-1.6.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.draggable.js"></script>
    <style>
    #inactive_dragable { width: 50px; height: 50px; padding: 0.5em; background-color: green; }
    .test_drag { width: 50px; height: 50px; padding: 0.5em; background-color: red; position: absolute; }
    </style>
    <script>

    function createDraggableDiv(e){     
        if (!e) var e = window.event;   
        jQuery('<div/>', {
            id: 'tester',
        }).appendTo('#page_wrap');      
        var isIE = document.all ? true : false;
        var _x,_y;
        if (!isIE) {
            _x = e.pageX;
            _y = e.pageY;
        }
        if (isIE) {
            _x = e.clientX + document.body.scrollLeft;
            _y = e.clientY + document.body.scrollTop;
        }
        var boundry = $('#page_wrap').offset();
        $('#tester').addClass('test_drag');
        $('#tester').html("New div to drag");
        $('#tester').css("top", _y + "px");
        $('#tester').css("left", _x + "px");
        $('#tester').draggable();       
        // Now how do I make the new div immediately start dragging?
        // ...
    }
    </script>
</head>
<body>
<div id="page_wrap">
<div class="demo" style="width: 300px; height: 200px; background-color: blue; overflow-y: auto; overflow-x: hidden;">
<div onmousedown="createDraggableDiv(event);" id="inactive_dragable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
</div>
</body>
</html>

When you click on the div I want to be able to create a new div and drag that around instantly.

aziz punjani over 12 years

Show us the code you are using to create the div.
Ally over 12 years

Have added sample code, inside the createDraggableDiv function the code creates the div.

Ally over 12 years

Thanks for your comment, I will put together some example code but seeing your comment I realised my app is behaving differently because I've put the draggable div inside a div with style 'overflow-y: auto;' When there is a scroll bar you can not drag it outside.
Ally over 12 years

Thanks for the reply, I've done something similar to this and it works great but then the problem is firing the drag event off manually so that as soon as the mouse is down the user can drag the div around normally.
Kyle over 12 years

So your mousedown to add a div event is overriding the drag event? So instead of dragging the newly added div your just adding more divs?
Ally over 12 years

Thanks, tried it with my sample code, still no luck. I've tried many ways similiar to this but it doesn't seem to fire off the draggable functions.
Ally over 12 years

I'm not entirely sure what is going on, which is why I'm asking for help. It could be possible it's overriding the event though. With the way my app works adding the draggable div onmousedown does seem logical way to work. Please see demo code for a better explanation.
Kyle over 12 years

@Ally see my updated answer for some demo code that accomplishes what I think you are trying to do.
Ally over 12 years

Sort of, although the mousedown is kind of a requirement, I need to be able to mousedown -> call function (which creates the div) -> while the mouse is still down drag the div around.
Kyle over 12 years

On mouse down append the div, presumable right where the mousedown occurred. Then without skipping a beat make that start dragging. That's going to be tricky.
Reinstate Monica Cellio over 12 years

I've had a play about and can't find a way to do this. If I were you I'd get ready to think of a different approach, but keep looking in the meantime ;)
Ally over 12 years

@Kyle Is it possible? I would of thought so but everything I try does not seem to work. I thought firing another mousedown event would do the trick, which I may be doing incorrectly, but no luck with that either.
Ally over 12 years

@Archer Thanks, I'm thinking it might not be possible.
Reinstate Monica Cellio over 12 years

I don't expect this to work when there's a plugin involved. It's just me being a pedant and answering the question literally, in case other people end up here looking for that specific thing.
Kyle over 12 years

I think what he wants to do is immediately after the new div is added, and while you still have the mouse down. The new div starts dragging.
Ally over 12 years

Thanks, I gave it a go but it still seems to be stuck inside the container div. The only work around I can think of now is creating a custom scroll bar and not using the 'overflow' property. Seems a bit overkill though.
Kyle over 12 years

I think i figured it out. All you need to do is do .trigger(event). You may need to move your code around though, you need to apply all your css and whatnot on the div before you append it.
Jimmery over 12 years

ok, in the start function add a bit of code to remove the "overflow:auto" css from the parent div. you can then replace this property using the stop:function(){}, event.
Jimmery over 12 years

there are many problems inherent with overflow:auto and draggable items. perhaps instead of using a scrollable area you use pages instead? whatever you do, dont create a scrollbar from scratch - ive done one recently and its a complete nightmare!
Jimmery over 12 years

ignore the last two comments - the scroll:false should now solve your problems.
Ally over 12 years

@Kyle I think I tried this, doesn't seem to fire off the draggable functions that starts dragging the div around though :/
Kyle over 12 years

It's because your calling the event from within your html. If you use all jquery it will work properly.
Ally over 12 years

Sorry I don't quite understand, where do I put the scroll false? I've tried it in the '$(".selector").draggable({...' but doesn't seem to have an affect.
Ally over 12 years

In my example code I've added the line '$("div#tester").trigger("mousedown");' underneath my comments in the JavaScript function, is this what you mean?
Ally over 12 years

Oh one sec I think I understand what you mean now, no inline function calls. I'll try that.
Kyle over 12 years

Yeah instead of using inline event handling you can bind it using jquery. $(thingtobindto).eventname(function (eventarg){ //do stuff }). api.jquery.com/category/events it's a lot cleaner and easier to read in my opinion.
Ally over 12 years

Tried it with '(document).ready(function(){ $("#inactive_dragable").mousedown(function(e) {...' no luck though.
Ally over 12 years

You are a genius. Thankyou very much, you've solved something I wouldn't of been able to myself. I added the document.ready check before applying the handler and the positioning needs a tweak but it works perfectly thanks. I hope Google finds this as there's no quick Google solution or at least I didn't find one.
Kyle over 12 years

I'm no genius but I'm glad I could help!
Jimmery over 12 years

.selector is just the identifier of what you want to drag, im guessing a html div, eg <div class="selector">draggable</div> - ive edited my solution and put scroll:false in the right place for you.