October 28, 2013 7:04 am

How to drag and drop items using jQuery

I have receive many requests from my readers to write something about dragging items using jQuery, so today I am going to write about jQuery dragging with sortable to do that I have used jQuery UI library. Its a very simple to understand and implement have a look on the script.




HTML page which required to create boxes.

jQuery methods call and include js libraries:

sortable used to make all items in order.

$(“#drag”) id of your div area in which you can drag and drop items.

opacity: 0.5 is used to show the shade of item which you are moving.

CSS for style the boxes in your page

Feel free to comment we love to answer you.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories:
  • eko

    I am wondering how would i save changes to this, so blocks stay in order i move them around… Thinking to use it for blocks on my website or similar?