How to drag div or re-ordeing div using jquery sortable plugin

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>

</script>

I have followed this URL: https://jqueryui.com/resources/demos/draggable/sortable.html

Hope you will find this helpful.