javascript - ドラッグアンドドロップ画像を実装するには?

Question

ユーザーが画像をアップロードしてから、写真を表示したい順にドラッグ アンド ドロップできる機能をどのように実装しますか? ROR フレームワークを使用しています。もしかして宝石？

Answer 1

これを行う 1 つの方法は、画像をリストに入れ、各 li に画像 ID を含むデータ属性を与えることです。次のようにします。

<ul>
    <li data-image_id="1"><img src="/image1.png" /></li>
    <li data-image_id="2"><img src="/image2.png" /></li>
</ul>

次に、素敵な JavaScript コード ( http://farhadi.ir/projects/html5sortable/などの Jquery プラグインを使用できます) を記述し、ドラッグの最後にコールバックを使用します。コールバックでは、リストをループし、data-image_id 値を解析し、このデータをさらに処理するためにサーバーに送り返す小さなコードを記述します (たとえば、「位置」を INT としてデータベースに格納します)。

Ps。位置フィールド DESC を使用して、位置が 0/null の新しい画像が自動的に行の最後の画像になるようにすることをお勧めします。クライアントは、慎重に注文したセットに 4 つの新しい画像を追加した後、すべての画像を再配置する必要がないことに感激するでしょう。