JQueryUI 连接列表 + 可在选项卡中排序答案

【问题标题】：JQueryUI Connected lists + sortable in tabsJQueryUI 连接列表 + 可在选项卡中排序
【发布时间】：2011-03-15 14:17:38
【问题描述】：

在互联网上寻找解决方案几天后（我对 HTML、JQuery、php 非常陌生，我是一名 as400 rpg 程序员，现在正在转向这种架构），终于我来了寻求帮助。我想在一个选项卡中获得一个可排序的项目列表（这已经完成），并且从这个列表中我想将一个项目拖到另一个选项卡，这是主要问题：下面的代码可以工作，但我不能拖到第一个选项卡。在 sortable 中，我已将警报用于可视化选项卡代码并查看更新是否有效。在 php 中，我放置了编写数据库的代码，我必须使用列表中的信息对其进行更新。我从 JQueryUI.com 复制了所有代码。

$(document).ready(function() {

        $( "ul.dropfalse" ).sortable({
        connectWith: "ul.dropfalse",
        cursor: 'crosshair',
                    opacity: 0.8,
        placeholder: "ui-state-highlight",
        revert: true,
        scroll: true,
        update: function (event, ui) {
                            var target = event.target.id;
                alert(target);
                var order = $(this).sortable('serialize');
                $("#update").load("tabsitem.php?"+order);
                alert("update")
                }
    });

    $( "#sortable" ).disableSelection();

    $( "#tabs" ).tabs();

})  

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">Tab 1</a></li>
       <li><a href="#tabs-2">Tab 2</a></li>
       <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
<div id="tabs-1">
    <ul id="sortable1" class='dropfalse'>
        <li id="TABItem_11"><img src="arrow.png" alt="move" />1st TAB.Item 1</li>
        <li id="TABItem_12"><img src="arrow.png" alt="move" />1st TAB.Item 2</li>
        <li id="TABItem_13"><img src="arrow.png" alt="move" />1st TAB.Item 3</li>
        <li id="TABItem_14"><img src="arrow.png" alt="move" />1st TAB.Item 4</li>
        <li id="TABItem_15"><img src="arrow.png" alt="move" />1st TAB.Item 5</li>
    </ul>
</div>
<div id="tabs-2">
    <ul id="sortable2" class='dropfalse'>
        <li id="TABItem_21"><img src="arrow.png" alt="move" />2nd TAB.Item 1</li>
        <li id="TABItem_22"><img src="arrow.png" alt="move" />2nd TAB.Item 2</li>
        <li id="TABItem_23"><img src="arrow.png" alt="move" />2nd TAB.Item 3</li>
        <li id="TABItem_24"><img src="arrow.png" alt="move" />2nd TAB.Item 4</li>
        <li id="TABItem_25"><img src="arrow.png" alt="move" />2nd TAB.Item 5</li>
    </ul>
</div>
<div id="tabs-3">
    <ul id="sortable3" class='dropfalse'>
        <li id="TABItem_31"><img src="arrow.png" alt="move" />3rd TAB.Item 1</li>
        <li id="TABItem_32"><img src="arrow.png" alt="move" />3rd TAB.Item 2</li>
        <li id="TABItem_33"><img src="arrow.png" alt="move" />3rd TAB.Item 3</li>
        <li id="TABItem_34"><img src="arrow.png" alt="move" />3rd TAB.Item 4</li>
        <li id="TABItem_35"><img src="arrow.png" alt="move" />3rd TAB.Item 5</li>
    </ul>
</div>
</div>
<pre>
    <div id="update">Waiting for update</div>
</pre>

还有另一个问题：为什么当我进入另一个选项卡时，该项目总是放在列表中的第 4 位？感谢任何可以帮助我的人。

【问题讨论】：

标签： jquery-ui-tabs jquery-ui-sortable