1

我正在使用 jQuery -UI 选项卡中的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（函数（）{    
    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/）

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

谁能帮我解决这个问题？

谢谢 ：）

4

3 回答 3

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

在您的示例中，您没有做任何类似的事情，只是您应该注意的事情。

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

于 2010-12-13T00:32:58.050 回答
0

等到单击选项卡以激活您的可拖动/可排序。所以，给你的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"
        });
    });
});
于 2010-12-13T00:26:22.070 回答
0

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

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

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

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

希望这是有用的

于 2011-03-16T21:09:45.470 回答