Home > DeveloperSection > Articles > Drag and Drop elements using jQuery

Drag and Drop elements using jQuery

JQuery JQuery 
0 Comment(s)
 2786  View(s)
Rate this:

Drag and Drop elements using jQuery

In this article I’m going to explain how to create a drag and drop element using jQuery.

Through this coding we can drag any item which is under the list and drop any other place.

<!doctype html>



    <title>::mindstick Sorting in jQuery::</title>

    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>

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




                list-style-type: none;

                margin: 100;

                padding: 10;

                width: 100%;


    #sort li


                margin: 2px 2px 2px 2px;

                padding: 0.5em;

                padding-left: 2em;

                font-size: 2em;

                height: 18px;




    $(function() {

        $( "#sort" ).sortable();

        $( "#sort" ).disableSelection();





   <ul id="sort">









Sortable ()

Sortable method in jQuery Enable a group of DOM elements to be Sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit.

disableSelection ()

disableSelection method is use to in jQuery script for make an unselect able text in your application.

After that coding we can get below output on your browser:


Drag and Drop elements using jQuery

Don't want to miss updates? Please click the below button!

Follow MindStick