Question

我正在经历一个奇怪的问题，在Resizable和可放置的Jquery事件之间搞砸了。

问题

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

我有以下代码

Jquery

 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

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

克隆可拖动后，还使用现有的手柄元素重新连接手柄。

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

Fiddle

在droppable不工作后调整大小

1 个答案: