0

当我尝试连接由选项卡分隔的 2 个列表时，over 事件不会在第二个选项卡上的列表上触发。

这是我的 HTML

<div id="TabSet" class="tabs">
    <ul>
        <li class="tab"><a href="#tabs-1">Nunc tincidunt</a></li>
        <li class="tab"><a href="#tabs-2">Proin dolor</a></li>
    </ul>
    <div id="tabs-1">
        <div style="padding: 10px;">
            <ul class="list" id="list1">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
            </ul>
            <ul class="list" id="list2">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
            </ul>
            <br style="clear: both;" />
        </div>
    </div>
    <div id="tabs-2">
        <div style="padding: 10px;">
            <ul class="list" id="list3">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
            </ul>
            <ul class="list" id="list4">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
            </ul>
            <br style="clear: both;" />
        </div>
    </div>
</div>

和 javascript

$(function() {
    $(".list").sortable({
        connectWith: ".list"
    }).disableSelection();

    var $tabs = $(".tabs").tabs();

    //for changing tab on over
    $(".tab").droppable({
        over: function(event, ui) {
            var $item = $(this);
            $tabs.tabs("select", $item.find("a").attr("href"));
        }
    });

    $(".list").droppable({
        over: function(event, ui) {
            var $item = $(this);
            $item.addClass('ui-state-highlight');
            console.log($item.closest('ul').attr('id'));
        },
        out: function(event, ui) {
            var $item = $(this);
            $item.removeClass('ui-state-highlight');
            ui.draggable.appendTo('#TabSet').show('slow');
        }
    });
});

我在jsfiddle创建了一个工作示例。

当您在第一个选项卡上的列表中拖动项目时，列表会突出显示，而在第二个选项卡上则不是这种情况。更奇怪的是，当我打印悬停列表的 id 时，我从第一个选项卡而不是第二个选项卡获取 id。

知道如何解决这个问题吗？

4

1 回答 1

1

在摆弄了几天并最终在这里询问后，我找到了解决自己问题的方法。在此处发布以帮助其他用户。

诀窍是不使用 droppable，而是使用 sortable 提供的事件。

我之前确实尝试过，但是当您切换选项卡时助手会丢失，解决方案是使用 appendto 并将助手设置为克隆。它并没有真正被克隆，但它是一个未记录的功能。

的HTML

<div id="TabSet" class="tabs">
    <ul>
        <li class="tab"><a href="#tabs-1">Nunc tincidunt</a></li>
        <li class="tab"><a href="#tabs-2">Proin dolor</a></li>
    </ul>
    <div id="tabs-1">
        <div style="padding: 10px;">
            <ul class="list" id="list1">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
            </ul>
            <ul class="list" id="list2">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
            </ul>
            <br style="clear: both;" />
        </div>
    </div>
    <div id="tabs-2">
        <div style="padding: 10px;">
            <ul class="list" id="list3">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
            </ul>
            <ul class="list" id="list4">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
            </ul>
            <br style="clear: both;" />
        </div>
    </div>
</div>

和 javascript

$(function() {

    $(".list").sortable({
        connectWith: ".list",
        appendTo: document.body,
        helper: 'clone',
        over: function(event, ui) {
            var $item = $(this);
            $item.addClass('ui-state-highlight');
        },
        out: function(event, ui) {
            var $item = $(this);
            $item.removeClass('ui-state-highlight');
        }
    }).disableSelection();

    //for changing tab on over
    $(".tab").droppable({
        over: function(event, ui) {
            var $item = $(this);
            $tabs.tabs("select", $item.find("a").attr("href"));
        }
    });

    var $tabs = $(".tabs").tabs();
});

jsfiddle上的工作示例。

编辑 发现我之前的示例不适用于嵌套选项卡，解决方案是将选项卡连接到可排序的选项卡并防止拖动选项卡并放置在选项卡上。

jsfiddle上的嵌套选项卡工作示例。

于 2013-04-17T05:44:24.983 回答