blog.longkey1.net

checkpadみたいな、javascriptでドラッグ＆ドロップで並び替えをやれないかとやってみた。
出来ればscript.aculo.usで。

以下のサイトを参考にした。
Never Ever - ドラッグ＆ドロップで並び替え

こういうオーソドックスなリストなら出来ることはわかった。
が、僕がやりたいのは、横にも縦にも並んだリスト。
幅を決めちゃって、自動で折り返しさせてしまうようなもの。

で、リストタグを横に並ばせる方法は、
(1) liをdisplay:inlineする。
(2) liをfloat:leftする。

の大きく分けて二つらしい。

なんとなく(1)の方がよさそうだったので、そちらでリストを横並びしてみると、うまくドロップ＆ドラッグが出来ない。
どうも、liがinlineだと上手く動かないっぽい。
位置がずれちゃったり、上手く反応しなかったり。
なんか座標の認識がずれてるのかな。

そこで、試しに(2)の方法でやったらうまくいった。

確かに以下のサイトでは、inlineでやってるけど、んー。
【連載】いまからはじめるScript.aculo.us (4) ドラッグ&ドロップを応用した画面コンポーネント | エンタープライズ | マイコミジャーナル

で、試しに

overlap    : 'horizontal',
constraint : 'horizontal'

って制限させたら、多少安定したくさい。
実際は縦にも動くし（自動で折り返しているだけだからだと思われる）

ようわからんなー。
ま、こういうドラッグ＆ドロップ系はinlineは結構はまりやすいのは確かだと思うけど。