排序盒在CSS3中的存放位置 - Storing position of sortable box in CSS3?

Storing position of sortable box in CSS3?

本文关键字：位置 CSS3 排序 | 更新日期: 2023-09-27

如何将box的位置存储在可排序的行流体中?例如，每次用户将一个框从category 1拖到category 2时，当他刷新页面时，它会记住位置吗?

你可能会想看看这个界面的HTML代码:

    <div class="row-fluid sortable">
        <div class="box span3">
            <div class="box-header well">
                <h2>Category1</h2>
            </div>
        </div>
        <div class="box span3">
            <div class="box-header well">
                <h2>Category2</h2>
            </div>
        </div>
    </div>

可以看到，它使用CSS文件中的一个类作为样式。或者使用jQuery有更好的方法来做到这一点吗?

至少有两种存储数据的方法

使用客户端cookie来存储数据。你可以使用像jquery-cookie这样的插件在客户端读取和写入cookie
将数据存储在服务器端。这将需要对后端脚本进行AJAX调用来存储数据。然后，您可以在每次新页面加载时查询数据库中的存储位置，或者创建一个新的AJAX调用来根据需要检索数据。

您将需要某种持久存储，正如George指出的那样，您可以通过cookie或数据库来实现。

下面是一个示例的链接，该示例使用jquery序列化拖动完成后的顺序，然后通过ajax将结果传递给服务器端脚本。然后，服务器端脚本更新数据库，并提供一种持久化订单的方法。

我要强调的是，这个例子是我几年前自己的一个例子。这是一个我不再维护的网站，但这篇文章有很多评论，突出了一些可能出现的问题。

示例使用列表而不是div。它还使用数据库进行持久存储，但是您可以修改服务器端脚本来保存cookie。

http://www.wiseguysonly.com/2008/12/07/drag-and-drop-reordering-of-database-fields-sortables-with-jquery/

应该足够简单，以适应您的确切需求。