需要编码帮助:向后拖放可恢复

Need coding help: Drag and drop back to revert

本文关键字：拖放 可恢复 编码 帮助      更新时间：2023-09-26

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

你能帮我编码一下吗？如何让它再次出现在拖动列表中。

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>

这是工作代码。你需要稍微优化一下！阅读更多可拖动的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

并且从不使用用户类，例如draggable/doppable，因为它们也被jQuery框架使用。尝试一些更独特的东西

相关文章：