0

この件に関するドキュメントは非常に明確でした: http://jqueryui.com/sortable/#connect-lists-through-tabs

プロジェクトで同じことをしようとしましたが、要素を 1 つのタブから別のタブに移動できません。何も起こらないこともあれば、アイテムが現在のリストから消えることもあり (display:none)、他に何もないこともあります...

私は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 に答える