0

关于这个主题的文档非常清楚：http: //jqueryui.com/sortable/#connect-lists-through-tabs

我试图在我的项目中做同样的事情，但我无法让元素从一个选项卡移动到另一个选项卡。有时什么也没有发生，有时项目从当前列表中消失（显示：无），没有别的......

我把 jsfiddle 放在一起来展示我所看到的。

也许我只是看不到我犯的小错误：S

http://jsfiddle.net/46zqm/1/

$(".word-list").sortable({
    tolerance: 'pointer',
    cursor: 'move',
    forcePlaceholderSize: true,
    dropOnEmpty: true,
    connectWith: 'ol.word-list',
    placeholder: "ui-state-highlight"
}).disableSelection();

// Words tabs
var $tabs = $("#tabs").tabs();

// Make tab names dropable
var $tab_items = $("#tabs-nav li", $tabs).droppable({
    accept: ".word-list li",
    hoverClass: "ui-state-hover",
    tolerance: 'pointer',
    drop: function (event, ui) {
        var $item = $(this);
        var $list = $($item.find("a").attr("href")).find(".word-list");

        ui.draggable.hide("fast", function () {
            $tabs.tabs("option", "active", $tab_items.index($item));
            $(this).appendTo($list).show("slow");
        });
    }
});

添加公差：指针固定在单调和下降区域的不一致。但一般问题仍然存在。

4

2 回答 2

1

杰米的回答让我找到了自己的解决方案：

var $list = $($item.find("a").attr("href"));

代替：

var $list = $($item.find("a").attr("href")).find(".word-list");

无需更改标记！

于 2013-10-28T14:52:46.797 回答
1

我已经从JQuery Sortable 文档中复制了推荐的 HTML 。试试下面的 HTML。

我将所有选项卡包装在一个带有 id 'tabs' 的 DIV 中，并且你所有的 'word-list' 类现在都包装在具有不同选项卡 ID 的 DIV 中。我还将所有<ol>元素更改为<ul>.

<section class="userview-right" id="tabs">
<h1>Words</h1>
<div id="tabs">   
    <ul id="tabs-nav">
        <li><a href="#tabs-1">list 1</a></li>
        <li><a href="#tabs-2">list 2</a></li>
        <li><a href="#tabs-3">Deleted</a></li>
    </ul>

    <div id="tabs-1">
        <ul class="word-list">
            <li class="ui-state-default">
                list 1
            </li>
        </ul>
    </div>
    <div id="tabs-2">
        <ul class="word-list">
            <li class="ui-state-default">
                list 2
            </li>
        </ul>
    </div>
    <div id="tabs-3">
        <ul class="word-list">
            <li class="ui-state-default">
                deleted
            </li>
        </ul>
    </div>
</div>
</section>

这是JsFiddle。

于 2013-10-28T14:41:09.617 回答