Drag and Drop and Sort DIVs in jquery

I’ve encountered a problem in my jquery code.

I need to have 2 divs at the sides of the page which contains some cards. I should be able to drag and drop from the one on the left to the one on the right. the cards must be clone so the original card stays in place.

Also the cards should be sortable within the droppable div and in the end i need to have a list stating the order of the items in the left div.

But here is my problem: the drag and drop works but i cant have 2 of the same item and my sorting doesn’t work.

Here is my code:

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

This will help you..

    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>

Advertisement

Answer