jquery 中的 DIV 拖放和排序

Question

我的 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>
  <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

这会帮助你..

    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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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>