分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了具有droppable draggable和resizable的Jquery无法按预期工作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

使用可调整大小的Droppable中的 JQueryUI Draggable不起作用.想法是能够拖动拖放到div的元素,并为已删除的元素调整大小.

工作代码：http://jsfiddle.net/lukaszjg/GvDLh/

重现问题的说明：

>将“拖我”拖到“放下的地方”

>尝试调整大小
>尝试将拖动的元素拖到“放置的位置”内
>尝试再次调整大小拖动元素 – 未按预期工作

请在下面找到#dragme和#droppable引用相应div的代码.
任何ide如何解决它？

$("#dragme").draggable({
Helper: 'clone',cursor: 'move',tolerance: 'fit'

});

var x = null;
$("#droppable").droppable({
drop: function(e,ui) {

x = ui.Helper.clone();

x.draggable({
Helper: 'original',containment: '#droppable',tolerance: 'fit'
});

x.resizable();
x.appendTo('#droppable');
ui.Helper.remove();
}
});

解决方法

将可调整大小的窗口小部件绑定到元素时,它将添加几个< div class =“ui-resizable-handle”>元素.然后,在你的drop回调中,你有这个：

x = ui.Helper.clone();

这将克隆.ui-resizable-handle元素以及要克隆的元素.然后几行,你有：

x.resizable();

显然,调用因.ui-resizeable-handle元素的存在而变得混乱;它最终将添加一组额外的.ui-resizeable-handle元素,但它们不会因为z-index问题而起作用：原始文件将(可能)高于它们并阻止所有事件进入.具有事件处理程序的ui-resiable-handle元素.如果您在使克隆重新调整大小之前手动删除有问题的< div>：

x.find('.ui-resizable-handle').remove();
x.resizable();

然后它工作：

$("#droppable").droppable({
    drop: function(e,ui) {
        x = ui.Helper.clone();
        x.draggable({
            Helper: 'original',tolerance: 'fit'
        });
        x.find('.ui-resizable-handle').remove();
        x.resizable();
        x.appendTo('#droppable');
        ui.Helper.remove();
    }
});