需要編碼幫助：將其拖放回復

Question

當我從下拉列表中刪除可拖放項目時，應將其添加到可拖動列表中。

可以請你幫我編碼，我可以如何使它在拖動列表中再次可見。

HTML：

<div class="draggable"> <div class="cs-drop">drag 1 
    <a href="#"> remove</a></div></div> 
<div class="draggable">drag 2</div> 
<div class="draggable">drag 3</div> 

<div style="clear: both;"></div> 

<div class="droppable">drop here</div> 
<div class="droppable">drop here</div> 
<div class="droppable">drop here</div> 

CSS：

<style> 
    .draggable { padding: 40px 25px; border: 1px solid red; float: left;} 
    .droppable { width: 100px; height: 100px; border: 1px solid black; float: left; } 
    .droppable.active { background-color: red; } 
</style> 

JS：

<script> 
$('.draggable').draggable({ revert: true }); 
drop(); 
function drop() 
{ 
$('.droppable').droppable({ 
    hoverClass: 'active', 
    drop: function(e, ui) { 
     $(this).html($(this).html()+ui.draggable.remove().html()); 
     $(this).droppable('destroy'); 
    } 


}); 
} 


     $(".droppable").on("click", "a", function(){  
     $(this).closest('.cs-drop').fadeOut(200, function() {$(this).remove();}); 
      drop(); 
}); 
</script> 

Answer 1

這裏是工作的代碼。 YOu需要優化一點！閱讀更多的Draggable API並通過一些示例。

<div class="drag-item"> 
    <div class="cs-drop">drag 1 <a href="#"> remove</a></div> 
    <div class="cs-drop">drag 2</div> 
    <div class="cs-drop">drag 3</div> 
</div> 
<div style="clear: both;"></div> 
<div class="drop-container">drop here</div> 
<div class="drop-container">drop here</div> 
<div class="drop-container">drop here</div> 

$('.cs-drop').draggable({ 
    revert: true 
}); 
drop(); 

function drop() { 
    $('.drop-container').droppable({ 
     hoverClass: 'active', 
     drop: function (e, ui) { 
      $(this).append(ui.draggable); 
      $(this).droppable('destroy'); 
     } 
    }); 
} 

$(".drop-container").on("click", ".cs-drop a", function() { 
    $(this).closest('.cs-drop').fadeOut(200, function() { 
     $('.drag-item').prepend($(this).clone().css('display','block')); 
     $(this).remove(); 
    }); 
}); 

更新fiddle

和從未用戶類新諸如拖動/可棄，因爲它們是由jQuery框架藏漢使用。嘗試更獨特的東西。