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.

Read Also:  Simple Jquery Search Filter Example

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.

Read Also:  jQuery Dynamically addClass and removeClass

<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 :

Read Also:  How to Launch Bootstrap Modal on Page Load?

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.

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *