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

Posted 2023-05-08

【中文标题】为啥我的 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/

【参考方案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 行的第一个删除，它将对您有用。