jQuery UI 可拖动排序在最初不活动的选项卡（jquery ui 选项卡）中不起作用

Question

我正在 jQuery-UI Tabs 中使用 jQuery-UI Draggable + jQuery-UI Sortable 开发拖放界面，

这是HTML 代码：

<div id="tabs">
<ul>
    <li><a href="#tabs-1">One</a></li>
    <li><a href="#tabs-2">Two</a></li>
    <li><a href="#tabs-3">Three</a></li>
</ul>
<div id="tabs-1">
    One
</div>
<div id="tabs-2">
    Two
</div>
<div id="tabs-3">
    <!-- BEGIN: DRAG & DROP INTERFACE  -->
    <div class="toolbar">
        <div class="item">
            <div class="in">
                Satu
            </div>
        </div>
        <div class="clear"></div>
    </div>

    <div class="sortable">
        <div class="target">
            <div class="clear"></div>
        </div>
    </div>        
    <!-- END: DRAG & DROP INTERFACE  -->
</div>

这是 javascript 代码：（

jQuery(function() {    
    jQuery( "#tabs" ).tabs({ selected: 0 });
    jQuery(".sortable .target").sortable({
        opacity: 0.5
    });    
    jQuery(".sortable .item, .toolbar .item").disableSelection();
    jQuery(".toolbar .item").draggable({
        connectToSortable: ".sortable .target",
        helper: "clone",
        revert: "invalid"
    });
});

您可以在这里看到整个代码： http://jsfiddle.net/dwiash/CWhFe /）

如果将拖放界面放置在最初显示的选项卡内，效果会很好。但如果它放置在最初不活动/隐藏的选项卡中，它就不起作用。问题是，拖放界面必须放置在最初隐藏/不活动的选项卡内

有人可以帮我解决这个问题吗？

谢谢 ：）

Answer 1

您可以使用选项卡上的 tabsshow 事件来绑定拖放内容， http://jsfiddle.net/kMZPR/1/：

function initDnD(event, ui) {
    if(ui.index != 2)
        return;
    jQuery(".sortable .target").sortable({ opacity: 0.5 });
    jQuery(".sortable .item, .toolbar .item").disableSelection();
    jQuery(".toolbar .item").draggable({
        connectToSortable: ".sortable .target",
        helper: "clone",
        revert: "invalid"
    });
    jQuery('#tabs').unbind('tabsshow', initDnD);
}

jQuery(function() {
    jQuery("#tabs").tabs({ selected: 0 }).bind('tabsshow', initDnD);
});

请注意，这会在事件完成后立即解除绑定，无需一遍又一遍地调用它；这也是 tabsshow 事件处理程序位于单独的命名函数中的原因。

另外，看起来 jQuery-UI 选项卡不会调用最初选择的选项卡的 tabsshow 事件处理程序。如果您希望最初选择“三”选项卡，那么看起来您最好手动完成，而不是通过选项：

jQuery("#tabs").tabs().bind('tabsshow', initDnD);
jQuery("#tabs").tabs('select', 2);  // Ensure that the event gets triggered

您在示例中没有执行类似的操作，只是您应该注意的事情。

当您处理需要完全实现/可见/定位才能添加额外功能的事物时，这是一种相当常见的技术。

Answer 2

等到单击该选项卡即可激活可拖动/可排序。因此，为您的 tab-3 链接提供一个 id：

<li><a href="#tabs-3" id="tab3">Three</a></li>

然后，更改 jQuery 以在单击时激活可拖动/可排序：

jQuery(function() {

    jQuery( "#tabs" ).tabs({ selected: 0 });

    $('#tab3').click(function() {
        jQuery(".sortable .target").sortable({
            opacity: 0.5
        });

        jQuery(".sortable .item, .toolbar .item").disableSelection();

        jQuery(".toolbar .item").draggable({
            connectToSortable: ".sortable .target",
            helper: "clone",
            revert: "invalid"
        });
    });
});

Answer 3

我知道我晚了几个月，但我刚刚遇到这个问题..
除了这篇文章之外，我在网上搜索时还发现了这个jqueryui Ticket...

在票证中建议采取解决方法：

$( ".draggable-class-name").draggable({
  connectToSortable: ".sortable-class-name",
  // other options here
  start: function(event, ui) {
      $( ".sortable-class-name" ).sortable("refresh");
  }
});

该解决方法似乎可以正常工作。这应该会有所帮助，至少在 jqueryui 团队解决这个问题之前是这样。

希望这有用