1

適切なタブにリスト項目をドロップして要素を移動したい。私はSimonBattersbyのソリューションを使用して、リストに定型化されたスクロールバーを追加します 。jQueryUIスライダーを使用した垂直スクロールバープラグイン。画面上でドラッグするとリストアイテムが表示されるように、次のソリューションを使用しました： jQueryドラッグ可能およびオーバーフローの問題。

私のサンプルはhttp://jsfiddle.net/XmahV/です。

次のコードは、並べ替え可能なオプションのhelper="original"の場合に機能します。

drop: function( event, ui ) {
   var $tabItem = $( this );
   var $list = $( $tabItem.find( "a" ).attr( "href" ) ).find( ".sortable" );

   **ui.draggable.hide( "slow", function() {
   $(this).appendTo($list).show();//it does not work in my case
   });**              

}

しかし、私の場合、helper = "clone"：

$( ".sortable" ).sortable({
                    connectWith: ".sortable",
                    //Need to drag across the entire window. Overflow issue.
                    appendTo: "body",  
                    containment: "window",
                    scroll: false,
                    helper: "clone"
                    //End Overflow issue.
        });

タブタイトルを下げるときに、誰かがリストアイテムを移動するのを手伝ってもらえますか？または、私の場合、アイテムをタブのヘッダーに転送するときに、リストからアイテムを削除する方法を教えてもらえますか？

ありがとう

4

1 に答える 1

0

実際には、「クローン」オプションが使用されている場合、元の要素は隠されています。したがって、すでに非表示になっている要素を再度非表示にすることはできません...それが機能していなかった理由です。コードの前に元の要素を表示しました: http://jsfiddle.net/XmahV/4/

var $tab_items = $("ul:first li", $tabs).droppable({
  accept: ".sortable .dragItem",
  hoverClass: "ui-state-hover",
  start: function (event, ui) {},
  stop: function (event, ui) {},
  receive: function (event, ui) {},

  drop: function (event, ui) {
    var $tabItem = $(this);
    var $list = $($tabItem.find("a").attr("href")).find(".sortable");

    //In case of clone helper, you must force to display the original element before hide it
    ui.draggable.show();
    ui.draggable.hide("slow", function () {
      $(this).appendTo($list).show();
    });

  }
于 2013-01-11T07:46:21.617 に答える