jquery实现可拖动DIV自定义保存到数据的实例

时间：2021-05-26

看到一个不错的jquery插件，可拖动DIV，顺序可保存到数据库的一个实例：这里就以其中PHP实例简单说明一下：

复制代码 代码如下:
<?php
//post到后台的数据
if ($_POST) {
$ids = $_POST["ids"];
for ($idx = 0; $idx < count($ids); $idx+=1) {
$id = $ids[$idx];
$ordinal = $idx;
//...
}
return;
}
?>

复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<h1>jQuery List DragSort PHP Example</h1>

<a href="https://www.jb51.net/">Homepage</a><br/>
<br/>

<h2>Save list order with ajax:</h2>

<ul id="gallery">
<?php
$list = array("blue", "orange", "brown", "red", "yellow", "green", "black", "white", "purple");
for ($idx = 0; $idx < count($list); $idx+=1) {
echo "<li data-itemid='" . $idx . "'>";
echo "<div>" . $list[$idx] . "</div>";
echo "</li>";
}
?>
</ul>

<script type="text/javascript" src="jquery.dragsort-0.5.1.min.js"></script>
<script type="text/javascript">
//saveOrder为回调函数
$("#gallery").dragsort({ dragSelector: "div", dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });

function saveOrder() {
var data = $("#gallery li").map(function() { return $(this).data("itemid"); }).get();
//通过ajax模拟post的方式,post格式形式为：[0, 1, 2, 5, 4, 3, 8, 6, 7]
$.post("example.php", { "ids[]": data });
};
</script>

<div style="clear:both;"></div>
</div>
</body>
</html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章