1

jQuery-UI Draggable + jQuery- UIを使用してドラッグアンドドロップインターフェイスを開発していますjQuery-UIタブ内で並べ替え可能

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（{
        不透明度：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、最初に選択されたタブのイベント ハンドラーを呼び出さないようです。最初に「3」タブを選択したい場合は、オプションを使用するよりも手動で行う方がよいようです。

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

数か月遅れていることはわかっていますが、この問題に遭遇しました..この投稿に加えて、Webで検索中にこの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 に答える