拖放后可拖动和调整大小

Question

如何在放置后拖动元素并调整其大小。

$(function() {

  $(".selectField").draggable({
    revert: 'invalid',
    helper: "clone",

  });

  $("#fuller").droppable({
    drop: function(event, ui) {

      var draggable = ui.draggable;
      draggable = draggable.clone();      
      draggable.appendTo("#fuller");
    }
  });
});

<div id="panel">
    <div id="resizable" class="selectField">
        <label for="#input">Name</label>
        <input type="text" id="input" />
    </div>
</div>

<div id="fuller"></div>

当我将 draggable() 和 resizable() 添加到删除的元素时，它不起作用。 我该如何解决？

Answer 1

一旦放置完成，您必须将克隆的可拖动元素设置为可调整大小

$(function() {

  $(".selectField").draggable({
    revert: 'invalid',
    helper: "clone",

  });

  $("#fuller").droppable({
    drop: function(event, ui) {

      var draggable = ui.draggable;
      var dragged = draggable.clone();      
      dragged.appendTo("#fuller");
      dragged.resizable({containment: '#fuller'})
    }
  });
});

<div id="panel">
    <div id="resizable" class="selectField">
        <label for="#input">Name</label>
        <input type="text" id="input" />
    </div>
</div>

<div id="fuller"></div>