当使用jquery拖放时，如何在cookie中存储排序表行

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

本文关键字：cookie 存储 排序 jquery 拖放      更新时间：2023-09-26

这段代码工作得很好，但我想在cookie中存储排序表行，以便下次用户加载页面时，这些值将从cookie中检索，表将按此排序。怎么做呢?请帮助…

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

要获得行顺序，请在行中添加id， 

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

现在您可以使用这段代码来获取行顺序然后将其保存到cookie

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

代码$('.sortable').sortable('toArray'). tostring()将返回一个以逗号分隔的id列表。

现在，在下一个页面加载时，您可以从cookie中获取这些逗号分隔的id，然后可以重新排序表行。

相关文章：