jquery Drag and Drop draggable droppable Example

Today, We want to share with you jquery Drag and Drop draggable droppable Example.In this post we will show you Multiple draggable droppable and sortable jQuery, hear for jQuery draggable and droppable between two containers and sortable we will give you demo and example for implement.In this post, we will learn about jquery sortable div drags and drops with an example.

jquery Drag and Drop draggable droppable Example

There are the Following The simple About draggable droppable with sortable Full Information With Example and source code.

As I will cover this Post with live Working example to develop jquery draggable droppable, so the jquery drags and drops list is used for this example is following below.

Read Also:  Simple website templates for beginners (with Examples)

jQuery/JavaScript Part

we will simply include jquery CDN file. as well as We added some custom jQuery or pure JavaScript Source code.

use the functions based on above Example.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

HTML Part

index.html

I will create HTML file.Just see bellow HTML with jQuery and css example html file and run in your local too.

<div id="boxmember">
<div class="draggable">MOVABLE BOX</div>
<div class="droppable"></div>
<div class="clear"></div>
</div>

CSS Part

#boxmember{
width:400px;
height:200px;
position:relative;
padding:11px;
border:solid 2px green;
}

.droppable {
width: 150px;
height: 100px;
float: left;
border:solid 2px gray;
margin-left:150px;
}

.draggable{
background-color:#d9de48;
display:table-cell;
text-align:center;
vertical-align:middle;
font-size:12px;
font-weight:bold;
width:76px;
height:76px;
float: left;
}

.hoverClass{
background:#339bfb;
color:#ffffff;
}

.dropClass{
background:#55d532;
}

.clear{
clear:both;
}

jQuery/JavaScript Part

we will simply include jquery CDN file. as well as We added some custom jQuery or pure JavaScript Source code.

Read Also:  jQuery Drag and Drop List Example

use the functions based on above Example.

$(function() {

$( ".draggable" ).draggable({
containment:"#boxmember",
revert: "invalid"
});

$( ".droppable" ).droppable({

tolerance: 'fit',
over: function(event, ui) {

$('.ui-draggable-dragging').addClass('hoverClass');
},
out: function(event, ui) {

$('.ui-draggable-dragging').removeClass('hoverClass');
},

drop: function( event, ui ) {
$( ".droppable" ).addClass('dropClass');
}
});
});

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jQuery draggable and droppable between two containers and sortable.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.