jquery - 在 droppable 不起作用后调整大小

Question

我正在经历一个奇怪的问题，Resizable 和 droppable Jquery Events 之间的事情搞砸了。

问题

我有一个可以轻松调整大小的 div。但是在将此 div 拖放到可放置区域后，我无法调整大小。任何人都可以帮助解决这个问题。

这是我的 Demo Fiddle

我有以下代码

查询

 function makeDraggable() {
            $(".selectorField")
                .draggable({
                    containment: $('body'),
                    helper: "clone",
                   cursor: "move",
                    cancel: null
                });
        }
        $(function () {
            var _ctrl_index = 1001;
            $(".resize_box").resizable({ handles: 'e' });

            makeDraggable();
            $(".droppedFields").droppable({
                accept: ":not(.ui-sortable-helper)",
                drop: function (event, ui) {
                    var draggable = ui.draggable;
                    draggable = draggable.clone();
                    draggable.appendTo(this);
                    makeDraggable();
                }
            });

        });

HTML

<div class="selectorField resize_box" style="height: 100px; width: 100px; background-color: green;"></div>

<div style="height:100px; width:100px;" ></div>
    <div id="Section1" style="height: 100px; line-height: 20px; width: 100%; border: 1px dotted red; display: table;">

        <div class="well droppedFields ui-sortable" style="width: 73px;"></div>

    </div>

CSS

 #Section1 > div {
            display: table-cell;
            border-right: 1px dotted red;
            text-align: center;
        }

Answer 1

抱歉，我误读了这个问题。元素在拖动后不可调整大小，因为克隆的元素没有附加可调整大小。

克隆 draggable 后，还要使用现有的 handle 元素重新附加 handle 。

var draggable = ui.draggable;
draggable = draggable.clone();
draggable.resizable({ handles: {'e': '.ui-resizable-e'} });
draggable.appendTo(this);

Fiddle