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

Question

我有以下标记和JavaScript来排序一些项目.项目可以在一个块内或在其他块中进行排序.它有效,但在项目从一个块移动到另一个块后,我在检索正确的块ID时遇到问题.

例如,如果我在"Block 1"中移动项目1,我会得到"我在Block = block_1",但如果我将项目1移动到Block 2,我仍然会在Block 1中.

但我想将块2作为其父容器.我需要检索此id,以便我可以执行一些ajax并相应地更新db.

你能帮我纠正一下吗？

<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

我怀疑问题是你正在使用错误的事件.基本上我认为发生的事情是停止事件太快或者错误的对象.

我会阅读这里的文档,看看是否有更合适的事件,你想要做什么.

我认为你想要的是"更新"或"停用"事件.

如果您将项目从一个"块"移动到另一个"块",则这两个事件都将针对每个"块"触发一次.

如果在块内移动,更新将仅触发一次

对于所有块,将始终触发停用.

通过更新,您可以通过检查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,所以我不能更具体.请记住,文档是你的朋友.

希望这可以帮助.