ソートでき、かつ片方向DragDrop な 2つの リスト

ソートでき片方向ドラッグを Javascript で

たとえば既存の画像を任意枠に追加したいときは、既存画像のリスト → 任意枠へのドロップとなる。

任意枠の画像を、既存画像リストにドロップが出来てしまうと不自然だからだ。

 

ただし、任意枠に持ってきても、既存画像に関しては既存画像リストにドラッグすることで消えるものとする。

 

需要ありそうだが作例がないので作ってみた。

ただし 「Sortable.js」というのを用いている (並び替え用途なら Jquery より軽いし、使いやすい）

 

 

ソースコードは右クリック「フレームソースの表示」で閲覧できます。なおこのサンプルでは li 内に文字しか入ってませんが、この中に img を入れれば、

画像アップローダなどの用途に利用できると思います。

 

 

最近のJavascript/HTML  は属性が任意に作れる

本文とは全く関係ありませんが、

最近の HTML・Javascript は、「data-**」という属性によって、属性を幾らでも作れるので便利だなと思います。従来であれば name, value, id, class など属性は限定的でしたが、 data-** 属性によって、** を任意にすれば幾らでも属性が作れるみたいで、しかも 標準Javascript でそれが簡単に処理できるので、非常に自由度が高く作れそうですね。取り立てて話題にすることでもないかもしれませんが、個人的にはこの最近の仕様、便利だなと思います。