javascript - jQuery 可拖动错误(元素与光标不对齐)

Question

编辑:JSFIDDLE:http://jsfiddle.net/h9yzsqfr/

-- 代码:

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

我在 elem.editor 定义的容器内有一些可拖动的对象；但是我在 div.lo-content 中有一些其他可拖动对象，它也在 elem.editor 内。

每当拖动 div.lo-content 中的对象时，它应该重新附加到工作正常的 elem.editor 容器；然而，正如下面的 GIF 所示(如下)，它没有将可拖动对象的位置设置为鼠标光标所在的位置。

此问题的解决方法是什么？

Answer 1

问题在于您的 width: 100% 和 containment 选项。一旦它附加到主体，它就会保持 100%，但是主体的大小会变小，但 containment 已经计算出来了。 解决该问题的一种方法是重置遏制。可能有不同的方法可以做到这一点，一种方法可能是这样的:

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/