JQuery Sortable elements using drag and drop

Today, We want to share with you JQuery Sortable elements using drag and drop.In this post we will show you Drags and Drops Element with JQuery UI Sortables, hear for How to create sortables elements using drags and drops in JQuery we will give you demo and example for implement.In this post, we will learn about Draggable Elements That Push Others Out Of Way with an example.

JQuery Sortable elements using drag and drop

There are the Following The simple About jQuery Sortables & Sort List Plugin with Examples Demo Full Information With Example and source code.

As I will cover this Post with live Working example to develop jquery ui drags and drops list, so the Drags & Drops List Items Between DIVS using jQuery is used for this example is following below.

jQuery/JavaScript Part

we will simply include jquery CDN file. as well as We added some custom jQuery or pure JavaScript Source code.

use the functions based on above Example.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

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

HTML Part

index.html

I will create HTML file.Just see bellow HTML with jQuery and css example html file and run in your local too.

<div id="accordion">
<div id="rootIdCart1" class="group">
<div class="uploads">Section 1</div>
</div>
<div id="rootIdCart2" class="group">
<div class="uploads">Section 2</div>
</div>
<div id="rootIdCart3" class="group">
<div class="uploads">Section 3</div>
</div>
<div id="rootIdCart4" class="group">
<div class="uploads">Section 4</div>
</div>
</div>
<input id="changevalues" type="text" value="" />

jQuery/JavaScript Part

we will simply include jquery CDN file. as well as We added some custom jQuery or pure JavaScript Source code.

use the functions based on above Example.

<script type="text/javascript">
    $(function () {
        $("#accordion")
            .accordion({
                header: "> div > div.uploads"
            })
            .sortable({
                axis: "y",
                handle: "div.uploads",
                update: function (event, ui) {
                    fetchValues();
                }
            });
    });

    function fetchValues() {
        var values = [];
        $('#accordion > .group').each(function (index) {
            values.push($(this).attr("id").replace("rootIdCart", ""));
        });
        $('#changevalues').val(values);
    }
</script>

CSS Part

<style type="text/css">
    .group{<br />
        background:gray;<br />
        color:#ffffff;<br />
        margin:3px 0;<br />
        cursor:pointer;<br />
        width:200px;<br />
        padding:11px;<br />
        border-radius:6px;<br />
    }</p>
<p>    .group:hover{<br />
        background:#9C3;<br />
    }<br />
 </style>

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jquery sortable on drops.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   How to delete tables from a database in mysql phpMyAdmin?
  2.   Vuejs Live Search Filter Example with Demo
  3.   Bootstrap get active tabs index using jQuery Example
  4.   jQuery toggleClass addClass removeClass Examples
  5.   Laravel JSON Encode Decode Handling
  6.   Jquery Live Search Filter Example with Demo
  7.   Create Dynamic Image Slider using PHP with jQuery
  8.   Generate PDF Files using Laravel 5.7 Dynamically Scripts
  9.   Laravel 6 Eloquent Model Increment Decrement
  10.   jquery Drag and Drop draggable droppable Example