Php 可排序Portlet更新查询_Php_Jquery

Php 可排序Portlet更新查询

php jquery

Php 可排序Portlet更新查询,php,jquery,Php,Jquery,我正在尝试更新与connectwith连接的一些可排序div。我以前做过一个表，更新查询可以工作，但是当涉及多个div时，它会变得很棘手。问题是我在数据库中有一个名为div的字段，该字段也需要使用可排序对象要放入的任何div进行更新，并将其按特定顺序放入该div中编辑：SOOO，如何为多个div.id位置创建可排序的更新查询我从代码中得到的结果仅用于更新一个div中的顺序，但在多个div中没有更新。另外，我不确定找到我将内容移动到的div并将其保存到数据库的最简单方法好的，这是我到目前为止

我正在尝试更新与

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）：


（功能（）{
$（'div.heriyah'）。每个（函数（）{
$（this.html（“+添加新内容”）；
var curID=$（this.attr（'id'）；//在进入fallr之前获取id
$（'.add'）。单击（函数（）{
$.fallr（'show'{
内容：“我基于jQueryUI示例生成了一些东西
我还没有实现后端调用或数据库端组件，但我相信您可以解决这个问题。我只对捕获移动的内容和位置感兴趣
当您在列表之间拖动项目时，将触发接收事件，以便我们使用该事件
我们还需要捕获更新事件，但对已由接收事件处理的项目不感兴趣。为此，我们需要检查ui.sender是否未定义（对于所有未连接的列表传输也是如此）。但是，更新事件似乎在更新完成后调用所有可排序容器。我们只希望在更新项的父项与接收更新事件触发器的列表相同时捕获数据。（我希望这有意义！）
总之，接收事件将用于捕获所有连接间列表传输，更新事件将捕获元素列表中发生的任何排序
<!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>


jQuery UI可排序-连接列表
#sortable1、#sortable2、#sortable3{列表样式类型：无；边距：0；填充：0；浮点：左；边距右：10px；}
#可排序1 li，#可排序2 li，#可排序3 li{边距：0 5px 5px 5px；填充：5px；字体大小：1.2em；宽度：120px；}
$（函数（）{
$（“#可排序1，#可排序2，#可排序3”）。可排序({
connectWith:“.connectedSortable”，
更新：功能（事件、用户界面）{
if（$（ui.sender.attr（'id'）==未定义）和（$（this.attr（'id'）==ui.item.parent（）.attr（'id'））{
警报（'UPDATE'+$（this.attr（'id'）+'++（ui.item.index（）+1）+'+$（ui.item.text（））；
}
},
接收：功能（事件、用户界面）{
警报（'RECEIVE:'+$（ui.sender）.attr（'id'）+'=>'+$（this.attr（'id'）++'+''+（ui.item.index（）+1）+'+$（ui.item.text（））；
}
}).disableSelection（）；
});

A
B
C
D
E


F
G
H
I
J


K
L
M
N
O

我需要为任何人澄清什么吗？是的。请将实际问题放在你的帖子中。同意Tadeck。你使用你的代码会得到什么样的结果，需要什么样的结果？当更新事件发生时，项目的顺序会自动保存，还是在单击按钮时保存？另外，p请分享这个HTML。好的，我会更新这个问题，但现在我会告诉@Shef，更新会在项目被拖放到可拖放区域时发生。很好，我会奖励你50个代表：你能用.attr（'id'）发送一个ajax请求吗？如果您想捕获列表的当前状态，我认为您需要向后端发送至少3个内容。目标列表的id、项目在目标列表中的位置以及传输的项目的唯一标识符（如果项目值是唯一的，您可以使用该标识符）例如，您可能会使用带有键/值对数据映射的POST，但如果您使用GET方法，则可以调用类似“admin/sortable.php？dest=sortable2&pos=2&val=L”的内容
<!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>