jQuery UI draggable-sortable 在最初不活动的选项卡（jquery ui tabs）中不起作用答案

【问题标题】：jQuery UI draggable-sortable does not work inside an initially inactive tab (jquery ui tabs)jQuery UI draggable-sortable 在最初不活动的选项卡（jquery ui tabs）中不起作用
【发布时间】：2011-05-24 09:54:07
【问题描述】：

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

这是 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(函数() {
    jQuery( "#tabs" ).tabs({ selected: 0 });
    jQuery(".sortable .target").sortable({
        不透明度：0.5
    });
    jQuery(".sortable .item, .toolbar .item").disableSelection();
    jQuery(".toolbar .item").draggable({
        connectToSortable: ".sortable .target",
        助手：“克隆”，
        还原：“无效”
    });
});

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

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

谁能帮我解决这个问题？

谢谢 :)

【问题讨论】：

标签： jquery jquery-ui jquery-ui-tabs jquery-ui-sortable jquery-ui-draggable

【解决方案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 事件处理程序位于单独的命名函数 BTW 中的原因。

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

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

在你的例子中你没有做这样的事情，只是你应该注意的事情。

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

【讨论】：

【解决方案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"
        });
    });
});

【讨论】：

关闭但不完全在那里。每次单击选项卡 3 时，上述内容都会重新连接所有可拖动的东西，而不是根据需要只重新连接一次。此外，jQuery-UI 为这些事情提供了自定义事件，并且手动绑定点击处理程序有点背道而驰，使用自定义事件将是正确的。
使用 $('#tab3').one('click', ... 而不是 $('#tab3').click(... 只会执行一次 D'n'D 内容。学究们仍然会心烦意乱，但这就是学究们的目的。

【解决方案3】：

我知道我迟到了几个月，但我刚刚遇到了这个问题.. 除了这个帖子，我在网上搜索的时候也发现了这个jqueryui ticket...

在票证中建议了一种解决方法：

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

解决方法似乎工作正常。这应该会有所帮助，至少在 jqueryui 团队解决它之前。

希望对你有用

【讨论】：