Jquery列表拖放

Question

我有一個Jquery拖放列表，我想使用Jquery Ajax Post立即在MYSQL中更新。

因為我可以在列表（多個列表）之間拖動元素，所以我需要獲取父ID（父類是列表類別ID - 拖動拖動的位置）

當我從一個類別/列表拖動到另一個類別/列表時，我總是被賦予前ID。

例如：

CAT 1 ------------ CAT 2

如果我要將某些東西從CAT1拖到CAT2 - ID將是CAT1而不是新的類別ID ...

我在下面添加了我的代碼：

jQuery的：

<script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js"></script>
    <script src="js/jquery.ui.widget.js"></script>
    <script src="js/jquery.ui.mouse.js"></script>
    <script src="js/jquery.ui.sortable.js"></script>
<script>
    $(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });
    </script>


    <script type="text/javascript">
    $(document).ready(function(){
    $(".mouseup").mouseleave(function(){
    var sparent = $(this).parent().attr("id");
    alert(sparent);
    });
    });
    </script>

列表HTML：

<div class="demo">
<div class="box">
<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default mouseup">Item 1</li>
    <li class="ui-state-default mouseup">Item 2</li>
</ul>
</div>
<div class="box">
<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight mouseup">Item 1</li>
    <li class="ui-state-highlight mouseup">Item 2</li>
</ul>
</div>
</div>

任何幫助，將不勝感激。

先感謝您！

Answer 1

你想要的是： http ： //jqueryui.com/demos/draggable/#events

$( "#sortable1, #sortable2" ).sortable({
    connectWith: ".connectedSortable",
    stop: function(event, ui) { alert($(ui.item).parent().attr("id") }
}).disableSelection();

將代碼放在停止回調中將允許您檢查正確的ID。

Answer 2

received您需要處理的事件。

 $(".connectedSortable" ).on( "sortreceive", function(event, ui) { 
     alert(ui.item.parent()[0].id); 
     // also ui.sender will hold original list, from where element was taken
 });

編輯：根據事實，如果您需要處理剛剛重新訂購項目的情況，即您在同一列表中拖放，或者您將使用已received或stop事件。 received將觸發只有在情況下，你拖動到另一個列表。 即使您將項目留在同一列表中，也會觸發stop 。