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

Question

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

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

但我想将块 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

也许它比使用 id 属性更好，而是使用它们的索引来标识元素。

更像

alert('I am in block' + $(this).parent().index());

Answer 2

您可以放心并添加一个 REL 属性，该属性将保存相应父 ID 的值。当您移动元素时，您需要添加一些代码来维护该 REL 属性。

Answer 3

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

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

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

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

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

Deactivate 将始终对所有块触发。

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

        $(".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(); 

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

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

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

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

希望这会有所帮助。