Question

当我尝试连接2个由制表符分隔的列表时，在第二个选项卡的列表中没有触发超过事件。

这是我的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。

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

Answer 1

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

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

我之前尝试过这个，但是当你切换标签时帮助器会丢失，解决方法是使用appendto和set helper来克隆。它并没有真正被克隆，但它是一个没有记录的功能。

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上的嵌套标签工作示例。

可以在不同的选项卡上触发的事件可丢弃

1 个答案: