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

前端未结

关注

 4  890

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 us

相关标签:

4条回答

挽巷

2021-01-20 03:35
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");
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
再見小時候

2021-01-20 03:47
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
0 讨论(0)
发布评论:

提交评论
- 加载中...
情深已故

2021-01-20 03:48
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!! :)
0 讨论(0)
发布评论:

提交评论
- 加载中...

执念已碎

2021-01-20 03:52

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

0 讨论(0)