0

ここやウェブ上の他の場所で大量の投稿を読みましたが、自分の状況に適した解決策を見つけることができません。

ドロップ可能として設定されている 2 つの div があります。#imgBrowser には、AJAX を介して動的に読み込まれる一連の画像が含まれています。その AJAX 呼び出しが戻ると、画像をドラッグ可能として設定し、2 つの div (#imgBrowser と #imgQueue) をドロップ可能として設定し、#imgQueue もソート可能として設定する関数を起動します。

ユーザーは、2 つの div 間で画像を前後にドラッグできます。私はこれを完璧に機能させています。しかし、私が追加したい機能は、#imgQueue もソート可能にすることです。

これまでの私のコードは次のとおりです。

function setUpSelectorDraggables(){
    $( "#imgBrowser > .imgTile" ).draggable({
          revert: "invalid",
          containment: 'window',
          scroll: false,
          helper: "clone",
          appendTo: 'body',
          cursor: "move"
        });

    $("#imgQueue")
        .sortable()
        .droppable({
          accept: ".imgTile",
          activeClass: "droppableActive",
          hoverClass: "droppableHover",
          drop: function( event, ui ) {
              addIMGtoQueue( ui.draggable );
          }
        });

    $( "#imgBrowser" ).droppable({
          accept: ".imgTile",
          activeClass: "droppableActive",
          hoverClass: "droppableHover",
          drop: function( event, ui ) {
              removeIMGfromQueue( ui.draggable );
          }
        });

    return false;   
}

2 つのサポート機能:

function addIMGtoQueue($item){
    $item.fadeOut(function() {
        $item.appendTo( "#imgQueue" ).fadeIn(function() {
          $item
            .animate({ width: "40px", height: "40px" })
            .find( "img" )
              .animate({ height: "42px", width: "42px" });
        });
      });

    return false;   
}

function removeIMGfromQueue($item){
    $item.fadeOut(function() {
        $item
          .css( "height", "150px").css( "width", "150px")
          .find( "img" )
            .css( "height", "150px" ).css( "width", "150px" )
          .end()
          .appendTo( "#imgBrowser" )
          .fadeIn();
      });

    return false;   
}

そして単純なhtml：

<div id="imgSelectionArea">
    <div id="galleryAlbumList"></div>
    <div id="imgBrowserContainer">
       <div class="albumNameHeader">
          <div class="albumNameArea">&lt;---Choose an Album</div>
       </div>
       <div id="imgBrowser" class="droppableNormal"></div>
    </div>
</div>
<div style="clear:both;"></div>
<div id="imgQueue" class="droppableNormal"></div>

私が抱えている問題は、#imgQueue をソートしようとすると、ドラッグ可能/ドロップ可能がソート可能をオーバーライドすることです。ソート可能なものがドラッグ可能なものをオーバーライドしていたとしたら、#imgBrowser にドラッグして戻したい場合は問題になると思います。私がやろうとしていることは可能ですか？

ありがとう！マット

4

1 に答える 1

0

Jquery ソート可能を使用する場合は、connectWith のプロパティを追加できます: '.div1, .div2'

したがって、基本的には 3 つの並べ替え可能なコンテナーがありますが、並べ替え可能にしたくないコンテナーで並べ替えを無効にすることができます。

于 2013-03-05T15:42:23.837 に答える