我的 jquery 代码遇到问题。
我需要在页面两侧有 2 个 div，其中包含一些卡片。我应该能够从左侧拖放到右侧。卡片必须是克隆的，以便原始卡片保留在原位。
此外，卡片应该可以在可放置的 div 中排序，最后我需要一个列表，说明左侧 div 中项目的顺序。
但这是我的问题：拖放可以工作，但我不能有两个相同的项目，而且我的排序不起作用。
这是我的代码：
$( 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> …