在jquery中拖放和排序DIVs

Question

我在我的jQuery代码中遇到了一个问题。

我需要在包含一些卡片的页面两侧有2个div。我应该能够从左边的拖放到右边的拖放。卡必须克隆，以便原始卡保持原位。

此外卡应该可排序的div内排序，最后我需要有一个列表说明在左边的div中的项目的顺序。

但这里是我的问题：拖放工程，但我不能有2个相同的项目，我的排序不起作用。

这里是我的代码：

$(function drag() { 
 
    $(".item").draggable({ 
 
    cursor:'move', 
 
    helper:'clone', 
 
    }); 
 
    }); 
 

 
$(function drop(){ 
 
    $("#droppable").droppable({ 
 
    drop:function (event, ui) { 
 
     ui.draggable.clone().appendTo($(this)).draggable(); 
 
     } 
 
    }); 
 
}); 
 

 
$(function sort(){ 
 
    $('.item#droppable').sortable(); 
 
    $('.item#droppable').disableSelection(); 
 
});

.item{width:70px; height:100px; border-radius:10%; margin:auto; margin-top:11.5%;} 
 
.red{background-color:red;} 
 
.blue{background-color:blue;} 
 
.black{background-color:black;} 
 
.green{background-color:green;} 
 
.yellow{background-color:yellow;} 
 
#droppable{width:150px; height:600px; border:1px black solid; float:left;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/jquery-ui-git.js" />  
 
<div id="draggable"> 
 
    <div class="item red" draggable="true"> 
 
    </div> 
 
    <div class="item blue" draggable="true"> 
 
    </div> 
 
    <div class="item black" draggable="true"> 
 
    </div> 
 
    <div class="item green" draggable="true"> 
 
    </div> 
 
    <div class="item yellow" draggable="true"> 
 
    </div> 
 
</div> 
 
<div id="droppable"> 
 

 
</div>

Answer 1

这将帮助你..

<div id="draggable" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    <div id="div_1" class="item red" draggable="true" ondragstart="drag(event)">1</div> 
    <div id="div_2" class="item blue" draggable="true" ondragstart="drag(event)">2</div> 
    <div id="div_3" class="item black" draggable="true" ondragstart="drag(event)">3</div> 
    <div id="div_4" class="item green" draggable="true" ondragstart="drag(event)">4</div> 
    <div id="div_5" class="item yellow" draggable="true" ondragstart="drag(event)">5</div> 
</div> 


<script type="text/javascript"> 

    function allowDrop(ev) { 
     ev.preventDefault(); 
    } 

    function drag(ev) { 
     ev.dataTransfer.setData("text", ev.target.id); 
    } 

    function drop(ev) { 
     ev.preventDefault(); 
     var data = ev.dataTransfer.getData("text"); 

     thisdiv = ev.target; 
     $(document.getElementById(data)).insertBefore(thisdiv); 
    } 
</script>