为什么我的 Jquery 可拖动对象放置在三个可拖放对象之一上时会跳转？答案

【问题标题】：Why does my Jquery draggable jump when placed on one of three droppables?为什么我的 Jquery 可拖动对象放置在三个可拖放对象之一上时会跳转？
【发布时间】：2014-01-21 16:52:41
【问题描述】：

我有三个可调整大小的可放置区域和一个可拖动区域，一旦拖动到可放置区域上，它就会变得可调整大小。但是可拖动并没有停留在我放下它的地方。它附加到正确的 droppable 中，但会在位置上跳跃，有时会超出屏幕边缘。

$('.draggable').draggable();

$(".droppable").droppable({

            drop: function (e, ui) {
                if ($(ui.draggable)[0].id != "") {
                    x = ui.helper.clone();
                ui.helper.remove();
                x.draggable({
                    helper: 'original',
                    tolerance: 'fit'
                });
                x.resizable({
                    aspectRatio:true,
                    minHeight: 50,
                    minWidth: 50
                });
               var id = "#" + $(this).attr("id");
               x.appendTo(id);
            }

            }
        });

$(".droppable").resizable();

jsFiddle 在这里：http://jsfiddle.net/gTwLe/3/

【问题讨论】：

标签： jquery draggable droppable resizable

【解决方案1】：

因为您正在克隆它，然后破坏原始文件。所以克隆后需要设置被克隆物体的坐标（x）与原来的匹配。

$('.draggable').draggable();


$(".droppable").droppable({

                drop: function (e, ui) {
                    if ($(ui.draggable)[0].id != "") {
                        x = ui.helper.clone();

                    x.draggable({
                        helper: 'original',
                        tolerance: 'fit'
                    });
                    x.resizable({
                        aspectRatio:true,
                        minHeight: 50,
                        minWidth: 50
                    });
                   var id = "#" + $(this).attr("id");
                   x.appendTo(id);
                    x.offset(ui.helper.offset());
                    ui.helper.remove();
                }

                }
            });

$(".droppable").resizable();

jsFiddle 在这里：http://jsfiddle.net/X4MmR/

【讨论】：

看起来不错（这个问题的正确答案）。当我添加它时，似乎并没有解决我实际应用程序中的问题。不知道你想不想看看。如果您转到字符选项卡并尝试将一个带到面板中，同样的事情仍在发生：thelionscall.com/wp-content/comic-creator/index-testb.html
您在第 123 行留下了 ui.helper.remove() 并在第 137 行添加了它。我认为如果您消除第 123 行的第一个删除，它将对您有用。