Demo
Drag li elements with the mouse anywhere with in yellow section(div). In this example, you will learn how to drag and drop li elements to div using jQuery UI plugin. See the demo and source code.
Drag from here
- Item A
- Item B
- Item C
- Item D
- Item E
- Item F
- Item G
- Item H
- Item I
Drop here
Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.ui-drop-hover
{
border: 2px solid #bbb;
}
#dragdiv
{
width: 180px;
height: 400px;
float: left;
}
#dropdiv
{
width: 380px;
height: 350px;
background-color: #F9F887;
float: right;
margin-right: 10px;
}
#dropdiv li
{
padding-left: 10px;
}
#maindiv
{
width: 600px;
height: 450px;
border: 2px solid #bbb;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"
type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#dragdiv li").draggable({
appendTo: "body",
helper: "clone",
cursor: "move",
revert: "invalid"
});
initDroppable($("#dropdiv"));
function initDroppable($elements) {
$elements.droppable({
activeClass: "ui-state-default",
hoverClass: "ui-drop-hover",
accept: ":not(.ui-sortable-helper)",
over: function (event, ui) {
var $this = $(this);
},
drop: function (event, ui) {
var $this = $(this);
$("<li></li>").text(ui.draggable.text()).appendTo(this);
if (this.children.length > 0) {
return false;
}
}
});
}
});
</script>
</head>
<body>
<div id="maindiv">
<div id="dragdiv">
<h3>
<span>Drag from here</span></h3>
<ul id="allItems" runat="server">
<li id="node1">Item A</li>
<li id="node2">Item B</li>
<li id="node3">Item C</li>
<li id="node4">Item D</li>
<li id="node5">Item E</li>
<li id="node6">Item F</li>
<li id="node7">Item G</li>
<li id="node8">Item H</li>
<li id="node9">Item I</li>
</ul>
</div>
<h3>
<span>Drop here</span></h3>
<div id="dropdiv">
</div>
</div>
</body>
</html>