Intraction, Drag and Drop Object
Let’s take a look at some of the things you can do with jQuery UI to improve how page elements interact with the user.
Drag & Drop
Making an element draggable couldn’t be simpler with jQuery UI:
$("#draggable").draggable();
This code shows how you could achieve this in an HTML page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/
jquery-ui.css"/>
<style>
#dragdiv {
width: 100px;
height: 100px;
background-color: #eeffee;
border: 1px solid black;
padding: 5px;
}
</style>
<title>Drag and Drop</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js">
</script>
<script>
$(function() {
$("#dragdiv").draggable();
});
</script>
</head>
<body>
<div id="dragdiv"> Drag this element around the page!</div>
</body>
</html>
When the page has loaded, the element <div id="dragdiv"> is made draggable:
$(function() {
$("#dragdiv").draggable();
});
You can then drag the item around the page by clicking the mouse on any part of the element. like below snapshot.
Try it Yourself: Drag and Drop with jQuery UI
To make an element capable of receiving another element that is dropped on it, you need to use the droppable() method. This method can be specified to act on various events, such as draggable items being dropped, being over the droppable area, or leaving the droppable area.
You’re going to modify the code from Listing 16.1 to add a further, larger <div> element as the drop area:
<div id="dropdiv">This is the drop zone ...</div>
In addition to making the draggable item draggable, you need to specify that the new <div> element is a drop area, like this:
$("#dropdiv").droppable();
In addition, you’re going to make the text on the draggable item change in response to being dropped, or to leaving the droppable area, by adding methods to the handlers of the drop and out events:
$("#dropdiv").droppable({
drop: function() { $("#dragdiv").text("Dropped!"); },
out: function() { $("#dragdiv").text("Off and running again ...");
} });
Create an HTML page containing the code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/
jquery-ui.css"/>
<style>
div {
font: 12px normal arial, helvetica;
}
#dragdiv {
width: 150px;
height: 50px;
background-color: #eeffee;
border: 1px solid black;
padding: 5px;
}
#dropdiv {
position: absolute;
top: 80px;
left: 100px;
width: 300px;
height: 200px;
border: 1px solid black;
padding: 5px;
}
</style>
<title>Drag and Drop</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js">
</script>
<script>
$(function() {
$("#dragdiv").draggable();
$("#dropdiv").droppable({
drop: function() { $("#dragdiv").text("Dropped!"); },
out: function() { $("#dragdiv").text("Off and running
again ...");
}
});
});
</script>
</head>
<body>
<div id="dropdiv">This is the drop zone ...</div>
<div id="dragdiv">Drag this element around the page!</div>
</body>
</html>
With the page loaded in your browser, you should now find that the draggable page element can be dropped within the droppable <div>, changing its text in response to the drop event.
The text changes once again as you drag the draggable item outside the border of the drop container, as shown in Google Chrome
Resize
To add a resizing handle to a block element is equally trivial thanks to jQuery UI
$("#resizable").resizable(); 
To demonstrate, you can chain the resizable() method to the droppable container of above given code.
$(function() {
$("#dragdiv").draggable();
$("#dropdiv").droppable({
drop: function() { $("#dragdiv").text("Dropped!"); },
out: function() { $("#dragdiv").text("Off and running again
..."); }
}).resizable();
});
Sort
A further wrapper for drag-and-drop functionality is the sortable() method, which you can add to items in a list to make the list sortable:
$("#sortMe").sortable();
This code demonstrates how you might apply this method to an unordered list element.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/
jquery-ui.css"/>
<title>Sortable</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js">
</script>
<script>
$(function() {
$("#sortMe").sortable();
});
</script>
</head>
<body>
<ul id="sortMe">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html>
Dragging elements to a new location in the list causes the list to sort, “snapping” the list into a new order when the drop is made.
