FOUR STEPS TO BUILD JQUERY DRAG AND DROP ELEMENT:
1. Add jquery-ui css cdn to the html document
2. Add to the jquery cdn to the html document
3. Add to the jquery ui js cdn to the html document
4. Make file named "dad..html" with given code.
STEP ONE: Add jquery-ui css cdn to the html document
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"/>
STEP TWO: Add to the jquery cdn to the html document
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
STEP THREE: Add to the jquery ui js cdn to the html document
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
STEP FOUR: Make file named "dad.html" with given code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/jquery-ui.min.css">
<script src="scripts/jquery-2.1.0.min.js"></script>
<script src="scripts/jquery-ui.min.js"></script>
<style>
#departmentNames { width: 200px; border:3px double green; background-color: lightyellow; }
#dropArea {height: 150px; width: 240px; border:3px double green; background-color: lightcyan; }
</style>
<script>
$(function() { $("li").draggable({ revert: "invalid" });
$("#dropArea").droppable({ accept: "li", drop: function( event, ui )
{ $("#message").append(ui.draggable.text() + "<br>"); } }); });
</script>
</head>
<body>
Departments: <ul id="departmentNames">
<li>Marketing</li>
<li>Sales</li>
<li>Development</li>
<li>Implementation</li>
<li>Production Support</li>
<li>Customer Support</li>
</ul>
<div id="dropArea" style="height"></div>
<div id="message"><strong>Items Dragged and Dropped:</strong><br></div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/jquery-ui.min.css">
<script src="scripts/jquery-2.1.0.min.js"></script>
<script src="scripts/jquery-ui.min.js"></script>
<style>
#departmentNames { width: 200px; border:3px double green; background-color: lightyellow; }
#dropArea {height: 150px; width: 240px; border:3px double green; background-color: lightcyan; }
</style>
<script>
$(function() { $("li").draggable({ revert: "invalid" });
$("#dropArea").droppable({ accept: "li", drop: function( event, ui )
{ $("#message").append(ui.draggable.text() + "<br>"); } }); });
</script>
</head>
<body>
Departments: <ul id="departmentNames">
<li>Marketing</li>
<li>Sales</li>
<li>Development</li>
<li>Implementation</li>
<li>Production Support</li>
<li>Customer Support</li>
</ul>
<div id="dropArea" style="height"></div>
<div id="message"><strong>Items Dragged and Dropped:</strong><br></div>
</body>
</html>
How It Works
In this code, in the DOM ready function: The following code sets all • li elements as draggable with the revert option as invalid. It means if the li element is not dropped successfully, the dragged element reverts back to its original position.
$("li").draggable({ revert: "invalid" });
CHAPTER 10 ■ JQUERY UI
376
The following code sets the • div element (with the ID dropArea) as droppable. The accept option is set to li, which means that this drop area will accept only li elements. The drop callback function is executed when an element is dropped successfully. In the drop callback function, you are appending the text of the dragged element to a div element with the ID set to message.
$("#dropArea").droppable({ accept: "li", drop: function( event, ui ) { $("#message").append(ui.draggable.text() + "<br>"); } });
No comments:
Post a Comment