Draggable and Resizable after drop

Question

How I can drag and resize element after drop.

$(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>

When I add draggable() and resizable() to dropped element it's does not work. How I can resolve it?

Answer 1

You have to make the cloned draggable element as resizable once the drop is complete

$(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>