如何在Droppable Div中对Cloned Div进行排序

时间:2013-04-26 11:39:39

标签: html jquery-ui

我有fiddle我有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>

第1分区的项目a,b,c,d是可排序的,第2分区是可投放的。

$(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,则会克隆它们。这种情况正在发生。

但是我需要它们在第二部分中可以排序。

1 个答案:

答案 0 :(得分:0)

它已经可以排序尝试删除后删除样式属性: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