CODEWITHSUNDEEP
javascriptjqueryjquery-uidom
Ally
Ally

Reputation: 4942

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

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.

Upvotes: 3

Views: 12238

Answers (4)

Radu Simionescu
Radu Simionescu

Reputation: 4705

The concept of creating a clone which is to be dragged is already implemented in the draggable plugin. You should have used it like so:

$('#tester').draggable({helper: 'clone', appendTo: 'body'});

The appendTo option represents the element where you want the helper to be created

You can hide your initial dragged object on dragstart (or leave it there if you desire) Here is a jsFiddle I made as a sample: http://jsfiddle.net/HnpbX/6/

If you want to achieve a functionality of dragging and dropping an element from one container to another, you should use the droppable in combination with draggable

Upvotes: 0

Jimmery
Jimmery

Reputation: 10139

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

Upvotes: 1

Kyle
Kyle

Reputation: 3300

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

Upvotes: 3

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26163

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");

Upvotes: 1

Related Questions