jQuery draggable bug (element not in line with cursor)

Question

EDIT: JSFIDDLE: http://jsfiddle.net/h9yzsqfr/

-- Code:

elem.editor.find("div.ui-widget").draggable(
{
    handle:"div.content",
    containment:elem.editor,
    snap:"*",
    start: function(e,ui)
    {
        $(ui.helper).addClass("dragging");
    },
    drag: function(e,ui)
    {
        checkTop(ui);
        if($(ui.helper).parents("div.lo-content").length > 0)
        {
            $(ui.helper).appendTo(elem.editor);
            ui.position = { 'top': e.pageY, 'left': e.pageX };
        }
    },
    stop: function(e,ui)
    {
        oldWidget.saveState($(ui.helper),1);
        setTimeout(function() {
            $(ui.helper).removeClass("dragging");
        }, 300);
    }
});

I have some draggable objects within a container defined by elem.editor; however I have some other draggable objects inside div.lo-content which is also inside elem.editor.

Whenever an object inside div.lo-content is dragged, it should reattach to the elem.editor container which is working fine; however as demonstrated in the following GIF (below), it is not setting the position of the draggable object to where the mouse cursor is.

What is a workaround for this problem?

problem

@guest271314 expected result is for that draggable element to be UNDER the cursor when it is dragged out of that white box. instead the draggable element moves to the left of the screen, and is not under the cursor. — zuc0001, Jul 04 '15 at 02:00
_"the draggable element moves to the left of the screen, and is not under the cursor"_ Yes, appear as described at `gif` . _"expected result is for that draggable element to be UNDER the cursor when it is dragged out of that white box"_ Can create stacksnippets , jsfiddle http://jsfiddle.net to reproduce effect at `html` document ? — guest271314, Jul 04 '15 at 02:06
@guest271314 My bad sorry. Here is your jsfiddle: http://jsfiddle.net/h9yzsqfr/ So once you drag it out of the container on the right, look where the element goes. The user cursor should be in tandem with the draggable element, if I understand correctly. — zuc0001, Jul 04 '15 at 02:18

score 2 · Accepted Answer · answered Jul 04 '15 at 04:01

The problem is your width: 100% and the containment option. As soon as its appended to body it stays 100%, but of the body, then it gets smaller but the containment has already been calculated. One way to solve it is to reset containment. There are probably different ways to do it, one way could be like this:

start: function (e, ui) {

    if ($(this).parents(".inner").length > 0) {

        $(ui.helper).addClass("dragging");
        ui.helper.css({
            'width': '100px',
                'left': '0px',
                'top': '0px'
        });

        ui.helper.data()['ui-draggable'].containment = [0,0,$('body').width(), $('body').height()]

        ui.helper.appendTo("body");
    }
},

http://jsfiddle.net/puurqx8r/6/

Thank you so much (removed my previous comment - found a solution). The only thing i had to add was the .containment line, everything else I left the same. Works perfectly. — zuc0001, Jul 04 '15 at 04:36

vijay kani · Answer 2 · 2015-07-04T02:16:12.773

0

connectToSortable It's a Selector that Allows the draggable to be dropped onto the specified sortables. If this option is used, a draggable can be dropped onto a sortable list and then becomes part of it. Note: The helper option must be set to "clone" in order to work flawlessly. Requires the jQuery UI Sortable plugin to be included.

Code examples:

Initialize the draggable with the connectToSortableoption specified:

$( ".selector" ).draggable({

connectToSortable: "#my-sortable"
 cursorAt:{top: 5, left: t}

});

edited Jul 04 '15 at 02:16

answered Jul 04 '15 at 01:50

vijay kani

140
8

thats not the problem though. Once I have dragged it onto the element, when I drag it off, the element is not underneath the cursor; as you can see in the GIF it has all the way towards the left of the screen. I want it to be draggable outside of it, but a bug is causing it to move away from the cursor. – zuc0001 Jul 04 '15 at 01:51
There is a option called cursorAt...it does the trick...I hope its help – vijay kani Jul 04 '15 at 02:17
Didn't work :(. Its still playing up. http://jsfiddle.net/h9yzsqfr/ Take a look at my example in that jsfiddle so you can see what the problem is. – zuc0001 Jul 04 '15 at 02:20

score 0 · Answer 3 · answered Apr 11 '19 at 14:54

0

Use cursorAt: top:, left: and appendTo: 'body' See my answer with example here.

jQuery draggable shows helper in wrong place after page scrolled

answered Apr 11 '19 at 14:54

Michelle Diniz

81
1
2

score 0 · Answer 4 · answered May 13 '19 at 18:14

0

I had the same problem. This is caused by the use of margins to center elements. Try using position absolute!

answered May 13 '19 at 18:14

Clint Clinton

634
5
8

score 0 · Answer 5 · answered Oct 26 '20 at 00:39

0

I removed position:absolute on dragable object

answered Oct 26 '20 at 00:39

Vitalicus

1,188
13
15

jQuery draggable bug (element not in line with cursor)

5 Answers5