html - 如何在 Droppable Div 中对克隆的 Div 进行排序

Question

我有一个小提琴，我有 2 个 div。

<div>
    <div class="inner1" id="sortable">
        <div class="inner" id="a"> a </div>
        <div class="inner"> b</div>
        <div class="inner"> c</div>
        <div class="inner"> d</div>
    </div>
    <div class="inner1" id="draggable"> -----&gt; </div>
    <div class="inner1" id="droppable">

    </div>
</div>

1st Div 的项目 a、b、c、d 是可排序的，而 2nd Div 是可放置的。

$(document).ready(function(){
    $("#sortable").sortable({
        revert:true
    });
    $("#draggable").parent().draggable();
    $("#droppable").droppable({
        drop:function(e,ui){
           if($(ui.draggable).parent().attr("id")!=$(this).attr("id"))
            $(ui.draggable).clone().appendTo($(this));
        },
        revert:true
    });
     $("#droppable").sortable();
});

如果项目从 Div1 删除到 Div2 ，它们将被克隆。这种事情正在发生。

但我需要它们在 2nd Div 中是可排序的。

Answer 1

它已经可以排序了尝试删除后删除样式属性：jsFiddle

$(document).ready(function(){
    $("#sortable").sortable({
        revert:true
    });
    $("#draggable").parent().draggable();
    $("#droppable").droppable({
        drop:function(e,ui){
            if($(ui.draggable).parent().attr("id")!=$(this).attr("id")){
               var clone = $(ui.draggable).clone();
                clone.removeAttr("style");
                clone.appendTo($(this));
            }
        },
        revert:true
    });
     $("#droppable").sortable();
});

这里对我来说很好：D