JQuery UI Sortableは、ulタグ等で構成したリストを複数並べて、liタグで構成したリスト要素を、ドラッグ&ドロップによってリスト間で相互往来できます。
これによりリストを横置きに用いて、商品陳列棚のようなイメージで物品を管理するといったアプリケーションシステムが非常に簡単に実現できます。
またJQuery UI Sortableは、様々なイベントに応じて色々な機能を組み込めるので、リスト要素のドラッグ&ドロップと同時に、番地更新(縦横位置更新)も併せて行うといったことが可能なため重宝していました。
ところが、番地の値が思い通りにならないケースがあり、とても困っていました。
色々調べたところ、どうやら各イベントの発火する順番が関係していました。
なかでもupdateイベントが曲者でした。
と言うのも、初めは番地更新を文字通りこのupdateイベントで行っていたのですが、要素のリスト間移動を、ある理由で要素をドロップした直後にこれをキャンセルにしたい場合も、移動先の番地に一旦変更される現象に苦しんだからです。
結局updateイベントより後に発火するreceiveイベントで横位置を更新し、stopイベントで縦位置を更新するといった方法に落ち着きました。
それにしてもこのJQuery UI Sortableはいいですね。
これとJQuery UI Droppableを組み合わせると、大部屋に2人掛け3人掛け4人掛けといった複数形式の座席を、混在して可能な限り隙間なく配置するといった施設予約システムが簡単に作れてしまいますよ。昔だとものすごい行数のプログラムを書かなきゃダメだったものが、ほんの数十行でできてしまいます。