web-dev-qa-db-ja.com

jQueryは2つのコンテナ間でドラッグおよびドロップ可能で、ソート可能

次の機能を備えた小さなページを開発しようとしています。

  1. ページには2つのdivがあります。1つは#Originで、多数のサムネイル画像が含まれています。2つ目は#dropで、画像をドロップできます（最大3つのみ）。
  2. 画像を#dropからOriginにドラッグアンドドロップできるようにする必要があります。
  3. #dropは、選択した3つの画像の順序が重要であるため、ソート可能である必要があります。
  4. #dropにドロップすると、画像は最初から元のように表示されているかのように整列します。

以前jQueryを使用したことはなく、ネイティブHTML5のドラッグアンドドロップイベントを介して2つのコンテナー間で既にドラッグアンドドロップを行っていた作業ページプロトタイプもありましたが、＃dropにsortable（）jquery機能を追加すると、画像を#Originにドラッグして戻せなくなったため、機能が壊れました。

それで、私は最初からやり直し、ドラッグ＆ドロップ機能とjQueryでのソート可能機能の両方を実装したいと考えました。ドラッグ、ドロップ、ソート可能なすべての機能についてAPI全体を読みましたが、これを機能させるのに苦労しています。各機能で使用している設定であるかどうかはわかりません。

フィドルでは、画像がドラッグ可能になり、実際に指定した設定（不透明度、カーソル）を見ることができますが、＃dropに画像をドロップすることはできません。

私が理解していることから、画像をドラッグ可能にする、「ドラッグ可能な」クラスを持つ画像、および「.draggable」を受け入れて#dropをドロップ可能にする組み合わせにより、最も基本的な機能が許可されるはずですが、取る。また、ドラッグ可能なものとドロップ可能なものの両方が同じ「スコープ」設定を持っている場合、それも動作するはずですが、そうではないことを読みました。

以下に、ページのコードの単純なバージョンとjsFiddleを示します。 http://jsfiddle.net/39khs/

コード：

css：

#Origin {
  background-color: green;
}
#drop {
  background-color: red;
  min-height: 120px;
}

js：

$("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" });
$("#drop").droppable({ accept: ".draggable", scope: "drop"});
$("#drop").sortable();

html：

<div id="wrapper">
    <div id="Origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/140x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/140x100" id="three" title="three" class="draggable" />
    </div>
  <p>test</p>
    <div id="drop" class="fbox">

    </div>
</div>

どんな助けも大歓迎です。

jqueryjquery-ui-sortablejquery-ui-draggablejquery-ui-droppable
27
GR7

最終結果のフィドルは次のとおりです。

http://jsfiddle.net/39khs/82/

重要なのは、「ドロップ」イベントを処理し、ドロップされた画像を#Originから手動で削除して#dropに追加することでした。それは実際に私が最初の実装でやっていたことですが、jQueryで正確にそれを行う方法を知りませんでした：

 $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);

なぜjQueryが古いコンテナからドラッグされた要素を実際に削除して新しい要素に追加しないのかわかりませんが、それは新しくドロップされたアイテムがドロップされた場所だけでなく正しく表示されるために行わなければならないことです、 CSSの配置/スタイル設定を無視します。

キーラインは、次のSOの質問に関する@Barry Pitmanによるものでした。

jQuery draggable + droppable：ドロップされた要素をドロップされた要素にスナップする方法

更新：今日は少し時間があるので、並べ替えだけで可能かどうかを確認したかったのです。

http://jsfiddle.net/wj4ak/5/

わずか2行のコードで、あるコンテナから別のコンテナにドラッグアンドドロップし、アイテムを並べ替えることができます。それらはul/olリスト内にある必要はまったくありません。面倒なことの1つは、Origin divのアイテムをソート可能にするつもりはなかったということですが、今のところ一緒に住めるものです。

64
GR7

.droppable()、.draggable()、および.sortable()を使用する場合は、.sortable()のみを使用する必要があります。

Jsfiddleを使用して、次の変更を行いました。

HTML：

<div id="wrapper">
    <div id="Origin" class="fbox">
    <ul id="sort1" class="list">
      <li><img src="http://placehold.it/140x100" id="one" title="one" class="draggable" /></li>
      <li><img src="http://placehold.it/140x100" id="two" title="two" class="draggable" /></li>
      <li><img src="http://placehold.it/140x100" id="three" title="three" class="draggable" /></li>
    </ul>
    </div>
  <p>test</p>
    <div id="drop" class="fbox">
      <ul id="sort2" class="list"></ul>
    </div>
</div>

JAVASCRIPT：

$( "#sort1, #sort2" ).sortable({
      helper:"clone", 
      opacity:0.5,
      cursor:"crosshair",
      connectWith: ".list",
      receive: function( event, ui ){ //this will prevent move than 3 items in droppable list
         if($(ui.sender).attr('id')==='sort1' && $('#sort2').children('li').length>3){
           $(ui.sender).sortable('cancel');
         }
      }
});

$( "#sort1,#sort2" ).disableSelection();

CSS：

#Origin
{
  background-color: green;
}
#drop
{
  background-color: red;
  min-height: 120px;
}
.list
{ 
  min-height: 120px;
} 
.list li
{
 display: inline-block;
 list-style-type: none;
 padding-right: 20px;
}

デモ： http://jsfiddle.net/39khs/80/

これがお役に立てば幸いです。質問がある場合はお知らせください。

21
Dom