Question

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

例如，如果我在“Block 1”中移动第1项，我会得到“我在Block = block_1”，但是如果我将第1项移到Block 2，我仍然会在第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

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

我会阅读文档Here并查看是否有更合适的事件来表达您的目标。

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

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

如果在一个区块内移动

，则只会触发一次

将始终触发所有块的停用。

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

希望这有帮助。

Answer 2

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

更像是

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

Answer 3

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

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

3 个答案: