保存新的列表顺序答案

【问题标题】：Save new order of list保存新的列表顺序
【发布时间】：2012-03-12 09:48:32
【问题描述】：

我尝试将我的列表视图的新订单保存到 cookie 中，以便用户可以按照他们的需要对列表进行排序。下次他们打开我的页面列表时的顺序与他们离开页面时的顺序相同。这可能吗？

我使用 jQuery Mobile，并通过这种方式使列表可排序：

    $(document).ready(function() {
    $('li').taphold(function() {
      // the clicked LI
      var clicked = $(this);

      // all the LIs above the clicked one
      var previousAll = clicked.prevAll();

      // only proceed if it's not already on top (no previous siblings)
      if(previousAll.length > 0) {
        // top LI
        var top = $(previousAll[previousAll.length - 1]);

        // immediately previous LI
        var previous = $(previousAll[0]);

        // how far up do we need to move the clicked LI?
        var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');

        // how far down do we need to move the previous siblings?
        var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

        // let's move stuff
        clicked.css('position', 'relative');
        previousAll.css('position', 'relative');
        clicked.animate({'top': -moveUp});
        previousAll.animate({'top': moveDown}, {complete: function() {
          // rearrange the DOM and restore positioning when we're done moving
          clicked.parent().prepend(clicked);
          clicked.css({'position': 'static', 'top': 0});
          previousAll.css({'position': 'static', 'top': 0}); 
        }});
      }
    });
  });

当用户点击并按住列表项时，该项目移动到列表顶部。

+ 我的页面也必须能够离线使用。

更新：

如何获得指向新列表的链接？现在我有这样的：

$('#home').live('pageinit', function(event) {
    // Check if we have saved the list order
    getListOrder();

    $('li').taphold(function() {
        // the clicked LI
        var clicked = $(this);

        // all the LIs above the clicked one
        var previousAll = clicked.prevAll();

        // only proceed if it's not already on top (no previous siblings)
        if (previousAll.length > 0) {
            // top LI
            var top = $(previousAll[previousAll.length - 1]);

            // immediately previous LI
            var previous = $(previousAll[0]);

            // how far up do we need to move the clicked LI?
            var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');

            // how far down do we need to move the previous siblings?
            var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

            // let's move stuff
            clicked.css('position', 'relative');
            previousAll.css('position', 'relative');
            clicked.animate({
                'top': -moveUp
            });
            previousAll.animate({
                'top': moveDown
            }, {
                complete: function() {
                    // rearrange the DOM and restore positioning when we're done moving
                    clicked.parent().prepend(clicked);
                    clicked.css({
                        'position': 'static',
                        'top': 0
                    });
                    previousAll.css({
                        'position': 'static',
                        'top': 0
                    });
                    saveListOrder();
                }
            });
        }
    });

    $('#resetLO').click(function() {
        resetListOrder();
    });

    $('#clearLS').click(function() {
        clearLocalStorage();
    });
});

function saveListOrder() {
    var $items = $('#theList li');

    $items.each(function(i) {
        //alert('Order:' +$(this).attr('rel')+' I: '+i); // This is your rel value
        // save the index and the value
        localStorage.setItem(i, $(this).attr('rel'));
    });
}

function getListOrder() {
    var list   = $("#theList");
    var $items = $('#theList li');
    var item;

    // check for localStorage
    if(localStorage.getItem(0) == null) {
        return; // use default list order
    }        

    // remove the previous list
    list.empty();

    $items.each(function(i) {
        item = localStorage.getItem(i);

        // create new list order
        list.append('<li rel="'+item+'"><a href="#">List Item #'+item+'</a></li>');
    });
    list.listview('refresh');    
}

function resetListOrder() {
    var list   = $("#theList");
    var $items = $('#theList li');
    var next;

    // remove the previous list
    list.empty();

    $items.each(function(i) {
        next = i + 1;
        list.append('<li rel="'+next+'"><a href="#">List Item #'+next+'</a></li>');
    });  
    list.listview('refresh');     
}

function clearLocalStorage() {
    // remove  all saved data
    localStorage.clear();     
}

HTML

<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
    <script src="http://jquerymobile.com/test/js/jquery.js"></script>
    <script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>

</head>
<body>
<div data-role="page" id="home">
    <div data-role="content">

        <ul data-role="listview" data-theme="g" id="theList">
            <li rel="1"><a href="http://www.example1.com">List Item #1</a></li>
            <li rel="2"><a href="http://www.example2.com">List Item #2</a></li>
            <li rel="3"><a href="http://www.example3.com">List Item #3</a></li>
            <li rel="4"><a href="http://www.example4.com">List Item #4</a></li>
            <li rel="5"><a href="http://www.example5.com">List Item #5</a></li>
            <li rel="6"><a href="http://www.example6.com">List Item #6</a></li>
            <li rel="7"><a href="http://www.example7.com">List Item #7</a></li>
            <li rel="8"><a href="http://www.example8.com">List Item #8</a></li>
            <li rel="9"><a href="http://www.example9.com">List Item #9</a></li>
            <li rel="10"><a href="http://www.example10.com">List Item #10</a></li>
        </ul>
        <br />
        <a href="#" data-role="button" id="resetLO">Reset List Order</a>
        <a href="#" data-role="button" id="clearLS">Clear Local Storage</a>
    </div>
</div>
</body>
</html>

当我重新排序列表并保存它时，它会将链接更改为“#”。

示例：我将 Item3 移到列表顶部，因此每个项目的链接都会更改 http://www.example3.com -> #

所以我猜它清除旧列表并再次制作整个列表。所以我想我必须改变这条线，但我不知道怎么做。 list.append('<li rel="'+item+'"><a href="#">List Item #'+item+'</a></li>');

【问题讨论】：

我这样做了一次，我最终做的是每次更改时将列表的内容和顺序写入文件，然后在页面加载时加载该文件。这对你有用吗？另外，我很确定有一个 jQuery 插件，所以你不必使用 CSS...
@Colleen：你有什么例子可以给我吗？我是 jQuery/HTML 编码的新手 :)

标签： jquery html jquery-mobile

【解决方案1】：

对于 HTML5，我会查看 localStorage

更新：

这是一个使用本地存储的示例

http://jsfiddle.net/TWMEq/
http://jsfiddle.net/TWMEq/1/（重新加载列表顺序）

$('#home').live('pageinit', function(event) {
    // Check if we have saved the list order
    getListOrder();

    $('li').taphold(function() {
        // the clicked LI
        var clicked = $(this);

        // all the LIs above the clicked one
        var previousAll = clicked.prevAll();

        // only proceed if it's not already on top (no previous siblings)
        if (previousAll.length > 0) {
            // top LI
            var top = $(previousAll[previousAll.length - 1]);

            // immediately previous LI
            var previous = $(previousAll[0]);

            // how far up do we need to move the clicked LI?
            var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');

            // how far down do we need to move the previous siblings?
            var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

            // let's move stuff
            clicked.css('position', 'relative');
            previousAll.css('position', 'relative');
            clicked.animate({
                'top': -moveUp
            });
            previousAll.animate({
                'top': moveDown
            }, {
                complete: function() {
                    // rearrange the DOM and restore positioning when we're done moving
                    clicked.parent().prepend(clicked);
                    clicked.css({
                        'position': 'static',
                        'top': 0
                    });
                    previousAll.css({
                        'position': 'static',
                        'top': 0
                    });
                    saveListOrder();
                }
            });
        }
    });

    $('#resetLO').click(function() {
        resetListOrder();
    });

    $('#clearLS').click(function() {
        clearLocalStorage();
    });
});

function saveListOrder() {
    var $items = $('#theList li');

    $items.each(function(i) {
        //alert('Order:' +$(this).attr('rel')+' I: '+i); // This is your rel value
        // save the index and the value
        localStorage.setItem(i, $(this).attr('rel'));
    });
}

function getListOrder() {
    var list   = $("#theList");
    var $items = $('#theList li');
    var item;

    // check for localStorage
    if(localStorage.getItem(0) == null) {
        return; // use default list order
    }        

    // remove the previous list
    list.empty();

    $items.each(function(i) {
        item = localStorage.getItem(i);

        // create new list order
        list.append('<li rel="'+item+'"><a href="#">List Item #'+item+'</a></li>');
    });
    list.listview('refresh');    
}

function resetListOrder() {
    var list   = $("#theList");
    var $items = $('#theList li');
    var next;

    // remove the previous list
    list.empty();

    $items.each(function(i) {
        next = i + 1;
        list.append('<li rel="'+next+'"><a href="#">List Item #'+next+'</a></li>');
    });  
    list.listview('refresh');     
}

function clearLocalStorage() {
    // remove  all saved data
    localStorage.clear();     
}

HTML

<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
    <script src="http://jquerymobile.com/test/js/jquery.js"></script>
    <script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>

</head>
<body>
<div data-role="page" id="home">
    <div data-role="content">

        <ul data-role="listview" data-theme="g" id="theList">
            <li rel="1"><a href="#">List Item #1</a></li>
            <li rel="2"><a href="#">List Item #2</a></li>
            <li rel="3"><a href="#">List Item #3</a></li>
            <li rel="4"><a href="#">List Item #4</a></li>
            <li rel="5"><a href="#">List Item #5</a></li>
            <li rel="6"><a href="#">List Item #6</a></li>
            <li rel="7"><a href="#">List Item #7</a></li>
            <li rel="8"><a href="#">List Item #8</a></li>
            <li rel="9"><a href="#">List Item #9</a></li>
            <li rel="10"><a href="#">List Item #10</a></li>
        </ul>
        <br />
        <a href="#" data-role="button" id="resetLO">Reset List Order</a>
        <a href="#" data-role="button" id="clearLS">Clear Local Storage</a>
    </div>
</div>
</body>
</html>

【讨论】：

我不知道如何使用 localStorage，因为列表中已经有大约 10 个项目，如果用户对它们进行排序并保存到 localStorage，所以我必须能够以某种方式更新它本地存储。正确的？以及如何：D
Phill Pafford：还有一个问题：如何将链接 (href="example.com") 传递给新的有序列表？每个项目都有不同的链接。现在它只使新的有序列表有链接“#”。:)
你能提供更多细节吗？
Phill Pafford：查看我的更新。希望你明白我想做什么。 :)
Phill Pafford：不，因为这些链接不同。该 www.example.com 仅在此示例中。我必须这样使用：第一项：google.com，第二项：yahoo.com，第三项：bing.com 等。

【解决方案2】：

没有将 2 个完整的文件转储给你，我提到的页面中的一些相关摘录：

在我的 JS 文件中：

//fetches the list and calls show list to show the contents
function getList(){
    //alert("in getList");
    jQuery.ajax({
        url:"todolist.php",
        success: function(responseText){showList(responseText)},
        error: ajaxFailure
    });
}
//keeps track of the new order when the user drags to reorder
function updateOrder(){
    var listitems=document.getElementsByTagName("li");
    var liststring="";
    for(var i=0; i<listitems.length; i++){
        liststring=liststring+"\n"+listitems[i].firstChild.nodeValue;
    }
    jQuery.ajax({
        url:"todolist.php",
        success: getList,
        error: ajaxFailure,
        type: "post",
        data: {action: "set", items: liststring}
    });
}

todolist.php 包含（以及其他内容）：

    } else {
    $items=$_REQUEST["items"];
        if($action=="set"){
            file_put_contents("todolist.txt", $items);
        } else { //add an item
            print($items);
            file_put_contents("todolist.txt", "\n".$items, FILE_APPEND);
        }
    }
} else {
    //print the current file
    if(file_exists("todolist.txt")){
        $contents=file_get_contents("todolist.txt");
        if($contents!=""){
            $contents=trim($contents);
            print($contents);
        }
    } 
}

如果我没记错的话，我刚刚在列表上调用了 .sortable() 以使其可拖动/可拖放/可排序。

但是，php 方法并不能解决您可以离线使用的问题（如果您的意思是要保留全部功能），因为当然 ajax 请求需要它在线。但我不确定您需要多少功能，所以这可能适合您。

【讨论】：