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（下图）所示，它没有将可拖动对象的位置设置为鼠标光标所在的位置。

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

problem

Answer 1

问题在于您的width: 100%和containment选项。一旦它附加到身体它保持100％，但身体，然后它变小，但containment已经计算。解决此问题的一种方法是重置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/

Answer 2

connectToSortable 它是一个选择器，允许将draggable拖放到指定的sortables上。如果使用此选项，则可拖动的可拖放到可排序列表上，然后成为其中的一部分。注意：帮助程序选项必须设置为“克隆”才能完美运行。需要包含jQuery UI Sortable插件。

代码示例：

使用指定的connectToSortable选项初始化draggable：

$( ".selector" ).draggable({

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

});

Answer 3

使用cursorAt: top:, left:和appendTo: 'body' 在此处查看我的答案和示例。

jQuery draggable shows helper in wrong place after page scrolled

Answer 4

我有同样的问题。这是由于使用边距使元素居中引起的。尝试使用绝对位置！

Answer 5

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

jQuery可拖动的bug（元素不符合游标）

5 个答案: