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=".5.0/jquery.min.js"></script>
<script src=".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>

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./ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="https://code.jquery./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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 19, 2017 at 7:28 Shekhar Pankaj 9,14533 gold badges3030 silver badges4848 bronze badges asked Jul 19, 2017 at 7:21 MamrezMamrez 11522 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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