Hello All,
Today, I am going to explain how to drag div or re-ordering the div using jquery sortable plugin.
Let’s start coding and follow the below steps.
We will need the jquery js script jquery-1.12.4.js. copy the jquery-1.12.4.js from the (https://code.jquery.com/jquery-1.12.4.js) and paste any location of your computer or you can copy the js file below URL.
We will also need the jquery ui script jquery-ui.js. copy the jquery-ui.js from the (https://code.jquery.com/ui/1.12.1/jquery-ui.js) and paste any location of your computer or you can copy the js file below URL.
We will also need the jquery ui css jquery-ui.css. copy the jquery-ui.css from the (https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css) and paste any location of your computer or you can copy the js file below URL.
We have completed all the pre-requirement step in achieving the objective.
We have used some HTML tag.
<ul>
<li id=”draggable” class=”ui-state-highlight”>Drag me down</li>
</ul>
<ul id=”sortable”>
<li class=”ui-state-default”>Item 1</li>
<li class=”ui-state-default”>Item 2</li>
<li class=”ui-state-default”>Item 3</li>
<li class=”ui-state-default”>Item 4</li>
<li class=”ui-state-default”>Item 5</li>
</ul>
We have use the script code :
<script>
|
1 2 3 4 5 6 7 8 9 10 11 |
$( function() { $( "#sortable" ).sortable({ revert: true }); $( "#draggable" ).draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" }); $( "ul, li" ).disableSelection(); } ); |
</script>
I have followed this URL: https://jqueryui.com/resources/demos/draggable/sortable.html
Hope you will find this helpful.
Recent Comments