我遇到了一个jquery代码的问题。
我需要在页面两侧放置两个包含卡片的div。我应该能够从左边的一个拖放到右边的一个。这些卡片必须是克隆的,以便原始卡片保持不动。
此外,卡片应该可以在可放置的div中进行排序,在最后我需要有一个列表来说明左侧div中项目的顺序。
但是,这里是我的问题:拖放效果可以实现,但我不能有两个相同的项目,并且我的排序不起作用。
以下是我的代码:
我需要在页面两侧放置两个包含卡片的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" />