次の機能を持つ小さなページを開発しようとしています。
- ページには 2 つの div があります。1 つは多くのサムネイル画像を含む #origin で、2 つ目は画像をドロップできる (最大 3 つまで) #drop です。
- 画像を #drop から原点にドラッグ アンド ドロップできる必要があります。
- #drop は、選択した 3 つの画像の順序が重要であるため、並べ替え可能である必要があります。
- #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>
どんな助けでも大歓迎です。