在其他标签上无法触发的可投放式结束事件 [英] Droppable over event not firing on different tab

问题描述

当我尝试连接由标签分开的2个列表时，over事件未在第二个标签上的列表上触发.

When I try to connect 2 lists which are seperated by tabs the over event is not firing on the list on the second tab.

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

And 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 上创建了一个工作示例.

I've created a working example on jsfiddle.

在第一个选项卡上的列表上拖动项目时，列表将突出显示，而在第二个选项卡上则不是这种情况. 令我更加奇怪的是，当我打印悬停列表的ID时，我是从第一个标签而不是第二个标签中获得ID的.

When you drag an item on the lists on the first tab the list gets highlighted, this is not the case on the second tab. What makes it even stranger is that when I print the id of the hovered lists, I get the id's from the first tab and not the second tab.

有什么办法解决这个问题吗?

Any idea how to solve this?

推荐答案

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

After fiddling with it for days and eventually asking here I found the solution to my own problem. Posting it here to help other users.

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

The trick is to not use droppable but use the events provided by sortable.

我确实早些尝试过，但是当您切换选项卡时，帮助程序会丢失，解决方案是使用appendto并设置帮助程序进行克隆. 它并没有真正被克隆，但是它是一个未记录的功能.

I did try this earlier but the helper gets lost when you switch tabs, the solution to this is to use appendto and set helper to clone. It doesn´t really get cloned but it´s an undocumented feature.

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

And 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 上的工作示例.

编辑 发现我的上一个示例不适用于嵌套选项卡，对此的解决方案是将选项卡连接到可排序项，并防止拖动选项卡和放置选项卡.

EDIT Found out that my previous example didn't work with nested tabs, the solution to this is to connect the tabs to the sortable and prevent dragging of tabs and dropping on tabs.

jsfiddle 上的嵌套标签工作示例.

Nested tabs working example on jsfiddle.

这篇关于在其他标签上无法触发的可投放式结束事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！