DIV dragging and sorting in jquery
I am facing a problem in my jquery code.
I need to have 2 divs on the sides of a page that contains multiple cards. I should be able to drag from one to the left to the one on the right. maps must be cloned to keep the original map in place.
Also, the cards need to be sorted in the dropdown div and at the end I need to have a list indicating the order of the elements in the left div.
But here's my problem: the drag and drop works, but I can't have 2 single items and my sort 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>
+3
source to share
1 answer
This will help you.
<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>
<script type="text/javascript">
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>
+1
source to share