Javascript 需要编码帮助：拖放以还原

当我从下拉列表中删除可拖放项时，它应该被添加到可拖放列表中

你能帮我编码吗？我怎样才能使它在拖动列表中再次可见

HTML:

拖动1
拖动2
拖动3
到这里来
到这里来
到这里来

CSS:

.draggable{padding:40px 25px；border:1px纯红；float:left；}
.Dropable{宽度：100px；高度：100px；边框：1px纯黑；浮动：左；}
.droppable.active{背景色：红色；}

JS:

$（'.draggable'）.draggable（{revert:true}）；
下降（）；
函数drop（）
{
$（'.droppable'）.droppable({
hoverClass:'活动'，
drop：函数（e、ui）{
$（this.html（$（this.html（）+ui.draggable.remove（）.html（））；
$（this.dropable（'destroy'）；
}
});
}
$（“.droppable”）。在（“单击”，“a”，函数（）{
$（this）.closest（'.cs drop'）.fadeOut（200，function（）{$（this.remove（）；}）；
下降（）；
}); 

这是工作代码。您将需要优化一点！更多地阅读可拖动的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();
    });
});

拖动1
拖动2
拖动3
到这里来
到这里来
到这里来
$（'.cs drop'）。可拖动({
回复：真
});
下降（）；
函数drop（）{
$（'.drop container'）。可拖放({
hoverClass:'活动'，
drop：函数（e、ui）{
$（this.append）（ui.draggable）；
$（this.dropable（'destroy'）；
}
});
}
$（“.drop container”）。在（“.click”，“.cs drop a”，函数（）{
$（this）.最近（'.cs drop'）。淡出（200，函数（）{
$（'.drag item'）.prepend（$（this.clone（）.css（'display'，'block'））；
$（this.remove（）；
});
});

更新的

---

并且永远不要使用诸如draggable/dropable之类的用户类，因为jQuery框架也使用它们。试试更独特的东西。

是的，很好。但在删除drag1后，它将添加到拖动列表中。同样的拖拽也需要放下。这是可能的，因为这是可能的！您需要以不同的方式实现代码！

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

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

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