CODEWITHSUNDEEP
javascriptjqueryasp.netcookies
Priyanka
Priyanka

Reputation: 55

how to store sorted table rows in cookies when jquery drag and drop is used?

This code works fine but i want to store sorted table rows in cookies so that next time user loads the page those values will be retrieved from cookies and table will be sorted as per that. How to do that? Please help.....

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fix Drag Tablet</title>
    <link rel="stylesheet" href="style/style.css">

    <!-- Javascript: tdBS -->
    <script src="javascript/lib/jquery.js"></script>
    <script src="javascript/lib/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="javascript/lib/jquery.ui.touch.punch.js"></script>
    <script src="javascript/lib/taphold.js"></script>

</head>
<body>
<table>
<tbody class="sortable">
    <tr><td class="sort-card">1</td></tr>
    <tr><td class="sort-card">2</td></tr>
    <tr><td class="sort-card">3</td></tr>
    <tr><td class="sort-card">4</td></tr>
    <tr><td class="sort-card">5</td></tr>
    <tr><td class="sort-card">6</td></tr>
    <tr><td class="sort-card">7</td></tr>
    <tr><td class="sort-card">1</td></tr>
    <tr><td class="sort-card">2</td></tr>
    <tr><td class="sort-card">3</td></tr>
    <tr><td class="sort-card">4</td></tr>
    <tr><td class="sort-card">5</td></tr>
    <tr><td class="sort-card">6</td></tr>
    <tr><td class="sort-card">7</td></tr>
    <tr><td class="sort-card">1</td></tr>
    <tr><td class="sort-card">2</td></tr>
    <tr><td class="sort-card">3</td></tr>
    <tr><td class="sort-card">4</td></tr>
    <tr><td class="sort-card">5</td></tr>
    <tr><td class="sort-card">6</td></tr>
    <tr><td class="sort-card">7</td></tr>
    <tr><td class="sort-card">1</td></tr>
    <tr><td class="sort-card">2</td></tr>
    <tr><td class="sort-card">3</td></tr>
    <tr><td class="sort-card">4</td></tr>
    <tr><td class="sort-card">5</td></tr>
    <tr><td class="sort-card">6</td></tr>
    <tr><td class="sort-card">7</td></tr>
</tbody>
</table>
<script>
    //This varible will help us when the jquery.ui.touch.punch.js start its magic
    var dragFlag = false;

    //starting the sortable ui jquery, no secrets.
    $(".sortable").sortable({
        // this delay will help not letting the cards make a move when the user is scroltdng the page.
        delay: 350,
        //some basics sets
        scroll: true,
        containment: "document",
        //onces you drop your element we have to set the dragFlag varible to false
        stop: function (event, ui) {
            dragFlag = false;
            // Here we return the card to the original scale
            $(".sortable td").css({ 'transition': 'all 0s', 'transform': 'scale(1)' });
        },
        //here is just to make sure that when you drop a card, it will return to the original scale and setting the dragFlag to false
        update: function (event, ui) {
            dragFlag = false;
            $(".sortable td").css({ 'transition': 'all 0s', 'transform': 'scale(1)' });
        }
    });

    // Here I'm using a good jquery plugin called taphold that fires a function after you hold a finger over the element for x mileseconds

    // to enable the drag and drop the user must hold the card over 2 mileseconds, the card will be bigger and the user will be able to drag the card around
    $(".sortable td").on("taphold", { duration: 200 }, function () {
        //setting the dragFlag to true
        dragFlag = true;

        //making the card bigger
        $(this).css({
            'transform': 'scale(1.1)'
        });
    });

</script>
</body>
</html>

Upvotes: 2

Views: 816

Answers (1)

B S Nayak
B S Nayak

Reputation: 170

To get the order of the rows, please add ids to the rows, 

<tr id="1"><td class="sort-card">1</td></tr>
<tr id="2"><td class="sort-card">2</td></tr>
<tr id="3"><td class="sort-card">3</td></tr>
<tr id="4"><td class="sort-card">4</td></tr>
<tr id="5"><td class="sort-card">5</td></tr>

Now you can make use of this code to get the row order and then to save that to cookie

document.cookie="orderList=" + $('.sortable').sortable('toArray').toString();

The code, $('.sortable').sortable('toArray').toString() will return a comma separated list of ids.

Now, on your next page load you can fetch those comma separated ids from the cookie and then can reorder the table rows.

Hope this will help you.

Upvotes: 1

Related Questions