29

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

  1. ページには 2 つの div があります。1 つは多くのサムネイル画像を含む #origin で、2 つ目は画像をドロップできる (最大 3 つまで) #drop です。
  2. 画像を #drop から原点にドラッグ アンド ドロップできる必要があります。
  3. #drop は、選択した 3 つの画像の順序が重要であるため、並べ替え可能である必要があります。
  4. #drop にドロップすると、元の画像が最初からそのように表示されていたかのように、画像が整列するはずです。

私はこれまで jQuery を使用したことがなく、実際に動作するページのプロトタイプさえありました。そこでは、ネイティブの HTML5 ドラッグ アンド ドロップ イベントを介して 2 つのコンテナー間でドラッグ アンド ドロップを行うことができましたが、sortable() jquery 機能を #drop に追加すると、画像を #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>

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

4

2 に答える 2

67

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

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

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

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

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

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

jQueryのドラッグ可能+ドロップ可能：ドロップされた要素をドロップされた要素にスナップする方法

更新：今日は暇があったので、並べ替えだけで可能かどうかを確認したかったのですが、見よ、そうだったのです。

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

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

于 2013-01-13T23:03:33.797 に答える
23

.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>

ジャバスクリプト:

$( "#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/

ご不明な点がございましたら、お気軽にお問い合わせください。

リンク:

于 2013-01-13T22:51:04.910 に答える