jQuery拖动布局其结果保存到数据库

定制首页的时代已经来临，如何让用户自主操作并保存个性化的布局成为一项重要的技术挑战。本文将详细介绍如何使用jQuery和PHP实现拖动布局，并将用户拖动的结果永久保存在数据库中。

许多网站采用简单的cookie记录用户拖动模块的位置，但这种方式存在缺陷，一旦cookie被清空或过期，用户的布局设置就会消失。而我们的目标是提供一种持久化的解决方案，让用户无论何时何地打开页面，布局都能保持不变，除非用户主动更改。

实现原理很简单：通过jQuery插件实现页面模块的拖动效果，然后将用户拖动后的模块位置通过Ajax实时传递给服务器端的PHP程序，PHP程序处理这些信息后，更新数据库中相应的字段。

让我们来看看代码部分。HTML结构如下：

其中，DIVloader用于展示提示信息，如加载中...，而orderlist是一个隐藏域，用于存储模块的排序值。后面的多个DIV.modules代表页面上的各个模块。

接下来是CSS部分：

module_list{margin-left:4px}

.modules{float:left; width:200px; height:140px; margin:10px; border:1px solid a6e9; background:e8f5fe;}

.m_title{height:24px; line-height:24px; background:afc6e9;}

loader{height:24px; text-align:center;}

重点在于给.modules设置向左浮动的样式float:left，以便实现模块的并排排列。

当用户拖动模块并松开手时，通过jQuery捕获到模块的新位置，然后通过Ajax发送给服务器。服务器端接收到位置信息后，PHP程序会处理这些信息并更新数据库中的记录。这样，即使用户更换了浏览器或者清空了cookie，他们的页面布局依然能够保持不变。

本文介绍的方法为用户提供了一个持久化的拖动布局体验，既满足了用户的个性化需求，又实现了数据的持久化保存。希望能够帮助你在实现类似功能时提供一些思路和启示。在jQuery的世界里，每一个细节都能展现出无穷的魅力。让我们一同走进一个关于模块排序的世界，体验拖拽带来的乐趣。

当您将鼠标悬停在页面上的“.m_title”元素上时，您的鼠标光标将瞬间切换成移动模式，一种熟悉的移动光标等待着您的操控。此刻，您可以随心所欲地拖动这些模块，调整它们的顺序。这一切都得益于jQuery的强大功能。

当您完成模块的拖拽排序后，一个神奇的更新过程即将启动。在幕后，有一个叫做“update.php”的服务器端程序正在静静地等待您的指令。当您完成排序后，前端将通过Ajax与这个后台程序进行交互。此时的页面展示了一个加载图标，告诉您正在更新排序信息。

这个过程是如何实现的呢？前端JavaScript代码会收集到每个模块的排序信息，然后与未排序前的信息进行对比。这些信息将通过Ajax以POST方式发送到后台的“update.php”程序。这个过程非常关键，因为它确保了您的排序更改能够被实时保存。

在服务器端，“update.php”程序接收这些POST数据，并与数据库中的信息进行对比。如果排序信息发生变化，它会立即更新数据库中的排序字段。这一切都在幕后默默进行，用户无需进行任何额外的操作。

让我们回到首页“index.php”。这个页面负责展示模块的布局。它通过连接数据库读取模块的排序信息，然后按照这些信息将模块展示出来。这样，用户在前端进行的所有操作，都能实时反映在首页的展示上。

这是一个融合了前端交互与后端处理的完整流程。它充分利用了jQuery的便利性和Ajax的实时性，为用户带来了一种全新的交互体验。无论是前端还是后端，都在默默地为这个体验付出努力，共同创造出一个完美的模块排序系统。引入jQuery库与jQuery UI的Sortable插件：构建动态拖动排序界面

===============================

在开始构建我们的拖动排序界面之前，请确保您的项目中已经引入了jQuery库和jQuery UI的Sortable插件。这两个文件是构建拖动排序功能的基础，不可或缺。

```html

```

从数据库读取排序字段值

===========

我们需要从数据库中读取排序字段的值。这里假设你已经建立了数据库连接，并准备执行SQL查询。

```php

include_once("connect.php");

$query = mysql_query("SELECT FROM sortlist WHERE id=1");

if ($rs = mysql_fetch_array($query)) {

$sort = $rs['sort'];

}

$sort_arr = explode(",", $sort);

$len = count($sort_arr);

```

循环显示各模块并应用拖动排序

===============

接下来，我们将循环显示各模块，并应用拖动排序功能。在此过程中，我们将使用jQuery UI的Sortable插件来实现拖动排序。

```html

```

保存排序结果到数据库

=========

当用户完成拖动排序后，你需要将最终的排序结果保存到数据库。这部分的实现会根据你的具体需求和应用场景有所不同。你可以通过AJAX技术与服务器通信，将最终的排序结果发送到服务器，然后由服务器处理并保存到数据库。

数据库结构设计方面，你可以根据需求自行设计。你需要一个字段来存储排序结果，这个字段可以是一个逗号分隔的字符串，或者是一个序列化的数组。

以上就是使用jQuery和jQuery UI的Sortable插件实现拖动布局并将排序结果保存到数据库的基本过程。希望这个例子能帮助你更好地理解并实现这个功能。如果你有更多的问题或需求，欢迎随时提问。

记得在你的页面底部关闭PHP标签并渲染页面：

```php

?>

```