Изменение размера после droppable не работает

Question

Я просматриваю нечетную проблему: вещи перепутаны между Resizable и Droppable Jquery Events.

Проблема

У меня есть DIV, который я могу легко изменить размер. но я не могу изменить размер после того, как я перетащил этот div в область сбрасываемым. Может ли кто-нибудь помочь в этом.

Это мой Demo Fiddle

Я следующий код

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