看到一个不错的jquery插件，可拖动DIV，顺序可保存到数据库的一个实例：这里就以其中PHP实例简单说明一下： 代码如下:<?php //post到后台的数据 if ($_POST) { $ids = $_POST[“ids”]; for ($idx = 0; $idx < count($ids); $idx+=1) { $id = $ids[$idx]; $ordinal = $idx; //… } return; }
在本实例中，我们探讨了如何使用jQuery库和一个名为jQuery Dragsort的插件来创建可拖动的DIV元素，并将它们的顺序保存到数据库。这个功能在需要用户自定义排序列表的应用场景中非常实用，例如在线内容管理、任务管理或者图片库。
jQuery Dragsort插件允许用户通过鼠标拖放操作来改变HTML列表元素（如`<li>`）的顺序。在本例中，我们使用了一个`<ul>`列表，每个`<li>`元素包含一个`<div>`，用于显示颜色名称。CSS样式确保了每个`<li>`元素具有合适的尺寸和边框，以便于视觉上的拖放操作。
代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* ... CSS样式 ... */
</style>
</head>
<body>
<!-- ... HTML结构 ... -->
<ul id="gallery">
<?php
// 创建颜色列表
$list = array("blue", "orange", "brown", "red", "yellow", "green", "black", "white", "purple");
// 循环遍历并生成HTML列表项
foreach ($list as $idx => $color) {
echo "<li data-itemid='" . $idx . "'>";
echo "<div>" . $color . "</div>";
echo "</li>";
}
?>
</ul>
<!-- 引入jQuery库和jQuery Dragsort插件 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.dragsort-0.5.1.min.js"></script>
<!-- ... JavaScript脚本 ... -->
</body>
</html>
```
接下来，我们需要编写JavaScript代码来实现拖放功能以及将排序结果发送到服务器。在本示例中，我们使用了jQuery的`$.ajax()`函数来实现AJAX请求，将重新排序后的`<li>`元素的ID数组（`ids`）发送到PHP后端进行处理：
```javascript
<script type="text/javascript">
$(document).ready(function() {
$("#gallery").dragsort({
dragEnd: function() {
var ids = [];
$('#gallery li').each(function() {
ids.push($(this).attr('data-itemid'));
});
$.ajax({
url: 'save_order.php', // 假设的处理页面
type: 'POST',
data: { ids: ids },
success: function(response) {
console.log('Order saved successfully.');
},
error: function(xhr, status, error) {
console.error('Failed to save order:', error);
}
});
}
});
});
</script>
```
在后端，PHP代码接收这些数据并处理保存顺序的逻辑：
```php
<?php
if ($_POST) {
$ids = $_POST['ids'];
for ($idx = 0; $idx < count($ids); $idx++) {
$id = $ids[$idx];
$ordinal = $idx;
// ... 与数据库交互的代码 ...
}
}
?>
```
这里的PHP代码只是一个简单的示例，实际应用中，你需要将`$id`和`$ordinal`值与数据库中的相应记录关联起来，更新它们的顺序。这可能涉及查询数据库以获取或更新记录的顺序字段。
总结来说，这个实例展示了如何使用jQuery和jQuery Dragsort插件创建一个用户可自定义排序的列表，并通过AJAX将新的顺序发送到后端存储。通过这种方式，你可以创建交互性强且用户体验良好的Web应用程序，让用户能够自由调整内容的排列顺序。
