The following html makes use of the jQuery UI to implement a simple drag and drop feature. Make sure you have download the jQuery UI and put those files in the correct directory.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/black-tie/jquery-ui-1.8.4.custom.css" />
<style type="text/css">
.dragArea {
background-color: Blue;
opacity: 0.5;
width: 300px;
height: 200px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
}
.dropArea {
background-color: Red;
opacity: 0.5;
width: 300px;
height: 200px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
}
.drag {
background-color: white;
width: 30px;
height: 20px;
border-style:solid;
border-color:green;
margin-top:10px;
margin-bottom:10px;
margin-right:10px;
margin-left:10px;
cursor:move;
float:left;
}
.drop {
background-color: white;
width: 30px;
height: 20px;
border-style:solid;
border-color:green;
margin-top:10px;
margin-bottom:10px;
margin-right:10px;
margin-left:10px;
float:left;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag and Drop</title>
</head>
<body>
<div class="dragArea">
<div id="d1" class="drag">123</div>
<div id="d2" class="drag">456</div>
<div id="d3" class="drag">789</div>
<div id="d4" class="drag">123</div>
<div id="d5" class="drag">456</div>
<div id="d6" class="drag">789</div>
<div id="d7" class="drag">123</div>
<div id="d8" class="drag">456</div>
<div id="d9" class="drag">789</div>
<div id="d10" class="drag">123</div>
<div id="d11" class="drag">456</div>
<div id="d12" class="drag">789</div>
<div id="d13" class="drag">123</div>
<div id="d14" class="drag">456</div>
<div id="d15" class="drag">789</div>
</div>
<div class="dropArea">
<div id="d16" class="drop">321</div>
<div id="d17" class="drop">654</div>
<div id="d18" class="drop">987</div>
<div id="d19" class="drop">321</div>
<div id="d20" class="drop">654</div>
<div id="d21" class="drop">987</div>
<div id="d22" class="drop">321</div>
</div>
<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript">
$(function(){
var dragOpts = {
revert: true,
revertDuration: 1000
};
$(".drag").draggable(dragOpts);
var dropOpts = {
accept: ".drag",
drop: moveDiv
}
$(".dropArea").droppable(dropOpts);
function moveDiv(e, ui) {
ui.draggable.remove();
$(document.createElement("div"))
.addClass("drop")
.attr("id", ui.draggable.attr("id"))
.text(ui.draggable.text())
.appendTo(".dropArea");
}
});
</script>
</body>
</html>
It is better to separate the css style from the html. but i combine them in this example to make it more straight forward.
Done =)
Eureka! 
One thought on “jQuery UI Drag and Drop Example”