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?

Answer 1

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/

Answer 2

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}

});

Answer 3

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

jQuery draggable shows helper in wrong place after page scrolled

Answer 4

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

Answer 5

我删除了position:absolute在可拖动对象上