我正在尝试更新一些与 connectwith 连接的可排序 div。我之前已经完成了一个表并且更新查询有效，但是当涉及多个 div 时，它会变得很棘手。问题是我的数据库中有一个名为 div 的字段，它还需要更新可排序对象放入的任何 div，以及将其按特定顺序放入该 div 中。
编辑:SOOO，如何为多个 div.id 位置创建可排序更新查询？
我从代码中得到的结果仅用于更新一个 div 内的顺序，但在多个 div 中没有更新。另外，我不太确定找到我将内容移动到的 div 并将其保存到数据库的最简单方法。
好的，这是我迄今为止仅更新一个 div 内的顺序的代码:
$(".heriyah").sortable({
handle : '.handle',
connectWith: ".heriyah",
revert: "invalid",
update : function () {
var order = $('.heriyah').sortable('serialize');
$("#info").load("admin/sortable.php?"+order);
}
});
还有 PHP:
foreach ($_GET['listItem'] as $position => $item) :
$sql[] = "UPDATE `temp` SET `order` = $position WHERE `id` = $item";
endforeach;
print_r ($sql);
以及生成内容的 HTML/PHP(使用大量 PHP 和 JQuery):
<script type="text/javascript">
(function() {
$('div.heriyah').each(function() {
$(this).html('<div class="add"><div id="add_button_container"><div id="add_button" class="edit_links">+ ADD NEW CONTENT</div></div></div><div class="clear"></div><div class="placeable" style="height:20px;background-color:#fff;"></div></div>');
var curID = $(this).attr('id');//get the id before you go into fallr
$('.add').click(function() {
$.fallr('show', {
content : '<iframe width="620" height="600" src="<? echo $URL ?>/manage_content.php?pageID=<? echo $pageID; ?>&div='+ curID +'"></iframe>',
width : 620 + 5, // 100 = for width padding
height : 600,
closeKey : true,
closeOverlay : true,
buttons : {}
});
});
});
})();
<?
include_once('system/js/dbc.php');
$pageID = $_REQUEST['pageID'];
$getdiv2 = mysql_query("SELECT * FROM temp WHERE pageID = '$pageID' ORDER BY `order` ASC");
while ($row = mysql_fetch_assoc($getdiv2))
{
echo "$('#{$row['div']}.heriyah').append('<div class=sortable id=listItem_{$row['id']}><div id=heriyah_content class=sortable_header>{$row['title']}<br>{$row['maintext']}<div id=heriyah_handle class=handle></div><a onClick=edit_{$row['id']}();return false><div id=heriyah_content_hover></div></a></div></div>');\n";
}
?>
</script>
<script>
$(".heriyah").sortable({
handle : '.handle',
connectWith: ".heriyah",
revert: "invalid",
update : function () {
var order = $('.heriyah').sortable('serialize');
$("#info").load("admin/sortable.php?"+order);
}
});
</script>
<div id="info"></div>
最佳答案
我已经制作了一些基于 jQuery UI 的东西 connect-lists示例。
我还没有实现后端调用或数据库端组件，但我相信你可以解决这个问题。我只对捕捉已移动的内容以及移动到何处感兴趣。
当您在列表之间拖动项目时，会触发接收事件，以便我们可以使用它。
我们还需要捕获 update 事件，但对 receive 事件已经处理的项目不感兴趣。为此，我们需要检查 ui.sender 是否未定义(因为对于所有非连接列表传输都是如此)。然而，更新完成后，更新事件似乎会调用所有可排序容器。我们只想在更新项的父级与接收 update 事件触发器的列表相同时捕获数据。 (我希望这是有道理的!)
总之，接收事件将用于捕获所有内部连接列表传输，而更新事件将捕获元素列表内发生的任何排序。
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://jqueryui.com/demos/sortable/"/>
<meta charset="utf-8">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "#sortable1, #sortable2, #sortable3" ).sortable({
connectWith: ".connectedSortable",
update: function(event, ui){
if(($(ui.sender).attr('id') == undefined)&&($(this).attr('id') == ui.item.parent().attr('id'))){
alert('UPDATE ' + $(this).attr('id') + ' ' + (ui.item.index()+1) + ' ' + $(ui.item).text());
}
},
receive: function(event, ui){
alert('RECEIVE: ' + $(ui.sender).attr('id') + '=>' + $(this).attr('id') + ' ' + (ui.item.index()+1) + ' ' + $(ui.item).text());
}
}).disableSelection();
});
</script>
</head>
<body>
<div class="demo">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">A</li>
<li class="ui-state-default">B</li>
<li class="ui-state-default">C</li>
<li class="ui-state-default">D</li>
<li class="ui-state-default">E</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">F</li>
<li class="ui-state-highlight">G</li>
<li class="ui-state-highlight">H</li>
<li class="ui-state-highlight">I</li>
<li class="ui-state-highlight">J</li>
</ul>
<ul id="sortable3" class="connectedSortable">
<li class="ui-state-default">K</li>
<li class="ui-state-default">L</li>
<li class="ui-state-default">M</li>
<li class="ui-state-default">N</li>
<li class="ui-state-default">O</li>
</ul>
</div>
</body>
</html>
关于php - 可排序 Portlet 更新查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8212601/