Как сделать JQuery draggable элементом append to droppable при удалении

Question

Редактировать: я хочу, чтобы последний клонированный элемент перетаскивался в любую позицию в droppable, я не хочу, чтобы он был отсортирован.

Я пытаюсь добавить мой перетаскиваемым-клон элемент сбрасываемой элемента при падении. когда элемент перетаскиваемым находится внутри сбрасываемой элемент, я хочу это (перетаскиваемый элемент), чтобы быть перетаскиваемым внутри сбрасываемой. Прямо сейчас элемент draggable-clone можно перетащить из своего положения, и когда он будет отброшен, он станет недоступен. Поэтому, пожалуйста, помогите мне в достижении моей цели. Благодарю.

вот код:

$(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' 
     }); 
    } 
});