Question

我正在尝试更新与connectwith相关联的某些可排序div。我之前做过一个表并且更新查询有效，但是当涉及多个div时，它变得棘手。问题是我在数据库中有一个名为div的字段，它需要更新以及可排序对象被放入的任何div AS WELL AS将其放入该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>

Answer 1

我根据jQuery UI connect-lists示例制作了一些东西。

我没有实现后端调用或数据库端组件，但我相信你可以解决这个问题。我只对拍摄移动的内容以及移动到哪里感兴趣。

在列表之间拖动项目时会触发接收事件，以便我们可以使用它。

我们还需要捕获更新事件，但对接收事件已处理的项目不感兴趣。为此，我们需要检查 ui.sender 是否未定义（因为它将用于所有非连接列表传输）。但是，似乎更新事件在更新完成后调用所有可排序容器。我们只想在更新项目的父项与接收更新事件触发器的列表相同时捕获数据。（我希望这是有道理的！）

总之，接收事件将用于捕获所有互连列表传输，更新事件将捕获元素列表中发生的任何排序。< / p>

<!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>

可排序的Portlet更新查询

1 个答案: