Submit your widget

JQuery UI Sortable Drag And Drop

Created 5 years ago   Views 37151   downloads 4065    Author hongkiat
JQuery UI Sortable Drag And Drop
View DemoDownload 161.4 KB
67
Share |

This particular plugin will enable a group of DOM to be sortable, meaning that we are able to move the object from one to another position. The following is how the final result will look like.

 

Step 1: Preparing Essential Files

Before we start working on the code, we need to prepare a few essential things, including: thejQuery, the jQuery UI library, and the FontAwesome to deliver the icon we are going to use later on.

For the jQuery and the jQuery UI library, you don’t have to host them on your own, the better, practical way is to link them from CDN, as follow:

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>  
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 

Put those scripts inside the <head> or before the closing body tag for better load performance.

Furthermore, we will not use the default styles that come with jQuery UI, so we need to create a new CSS file to store our custom styles and then link it to our document, as follows

Read more:http://www.hongkiat.com/blog/jquery-ui-sortable/