php - 如何在使用 Jquery sortable 排序后检索父容器 ID？

Question

我有以下标记和 javascript 来对某些项目进行排序。项目可以在一个 block 内或跨其他 block 进行排序。它有效，但我在将项目从一个 block 移动到另一个 block 后检索正确的 block ID 时遇到问题。

例如，如果我在“ block 1”中移动项目 1，我会得到“我在 block = block_1”，但如果我将项目 1 移动到 block 2，我仍然会得到我在 block 1 中。

但我想将 block 2 作为其父容器。我需要检索此 ID，以便我可以执行一些 ajax 并相应地更新数据库。

你能帮我改正这个吗？？

<div id="blocks_sortable">
    <div id="block_1">
        <h2>Block 1</h2>

        <div class="items_sortable connectedSortable">
            <div id="item_1"> 
                <span>Item 1</span></div>   
            <div id="item_2"> 
                <span>Item 2</span></div>
            <div id="item_3"> 
                <span>Item 3</span></div>
        </div>
    </div>  
    <div id="block_2">
        <h2>Block 2</h2>

        <div class="items_sortable connectedSortable">
            <div id="item_4"> 
                <span>Item 4</span></div>   
            <div id="item_5"> 
                <span>Item 5</span></div>
            <div id="item_6"> 
                <span>Item 6</span></div>
        </div>
    </div>
</div>

<script>
$("#blocks_sortable").sortable({ });
$(".items_sortable").sortable({
     connectWith: '.connectedSortable'
    , forcePlaceholderSize: true
    ,         stop : function(event, ui){
                    alert("I am in block = "+$(this).parent().attr("id"));
                }
}).disableSelection();      
</script>

谢谢。

Answer 1

我怀疑问题是您使用了错误的事件。基本上我认为正在发生的事情是停止事件触发得太早或针对错误的对象。

我会阅读文档 Here看看是否有更适合您尝试做的事情的事件。

我认为您想要的是“更新”或“停用”事件之类的东西。

如果您将一个项目从一个“ block ”移动到另一个“ block ”，这两个事件将针对每个“ block ”触发一次。

如果在一个 block 内移动，更新只会触发一次

停用将始终触发所有 block 。

通过更新，您可以通过检查 ui.sender 来检查事件是否在“非原始” block 中触发:

        $(".items_sortable").sortable({
            connectWith: '.connectedSortable',
            forcePlaceholderSize: true,
            update: function(event, ui){
                if(ui.sender){
                    alert(ui.item.attr("nodeName") + "  in block = " + 
                    $(this).parent().attr("id"));
                }
            }
        }).disableSelection(); 

只有当一个项目被移动到另一个 block 时才会提醒父 ID。两个区 block 都会触发该事件，但警报只会显示“非原始”区 block 。

如果您使用 AJAX 更新数据库中的信息，我怀疑您想要的是为两个 block 触发的事件:

一次用于现在缺少元素的“原始”，一次用于现在获得元素的"new"。

我不太熟悉您在做什么或 jQuery UI，所以我不能说得更具体。请记住，文档是您的 friend 。

希望这对您有所帮助。