如何使Jquery可拖動元素在丟棄時附加到可拖動元素

Question

編輯：我希望最終克隆的元素可拖放到可拖動的任何位置，我不希望它可以排序。

我想，當它降到我可拖動克隆元素追加到可放開元素。當拖動元件是可投放元件內，我希望它（可拖動元件）是可投放內部拖動。現在，可拖動元素可以從其位置拖動，並且當它被丟棄時，它將變成不可壓縮的。所以請幫助我實現我的目標。謝謝。

這裏是代碼：

$(function() { 
 

 
    $('#draggable').draggable({ 
 
     helper: 'clone' 
 
    }); 
 

 
    $('#droppable1, #droppable2').droppable({ 
 
     drop: function (event, ui) { 
 
      $(this) 
 
       .append(ui.helper.clone(false).css({ 
 
       position: 'relative', 
 
       left: '0px', 
 
       top: '0px' 
 
      })); 
 
     } 
 
    }); 
 

 
});

.well { 
 
    width: 150px; 
 
    height: 150px; 
 
    border: 3px solid red; 
 
} 
 
.ii{ 
 
    float:left; 
 
    margin-top: 20px; 
 
    margin-right: 20px; 
 
    border: 3px solid blue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script> 
 

 
<div class="well"> 
 
    <div id="draggable">CONTENT</div> 
 
</div> 
 
<div id="droppable1" class="ii well col-md-3" style="z-index:-1;"></div> 
 
<div id="droppable2" class="ii well col-md-9" style="z-index:-1;"></div>

Answer 1

初始元素作爲對文檔準備事件可拖動一個創建的，但是當你把從未創建新的元素有這個代碼運行在上面。它需要被添加到「下降」事件：

$('#droppable1, #droppable2').droppable({ 
    drop: function (event, ui) {   
     $(this) 
      .append(ui.helper.clone(false).css({ 
      position: 'relative', 
      left: '0px', 
      top: '0px' 
     })); 
     /* New stuff here: */ 
     $('.ui-draggable').draggable({ 
      helper: 'clone' 
     }); 
    } 
});