edo1z blog

プログラミングなどに関するブログです

javascript ドラッグ&ドロップで並び替え

HTML要素をドラッグアンドドロップで移動して、並び順を変更したい。

今知りましたが、sortabaleというドンピシャの機能があるんですねえ。ちなみに、ドットインストールにも載ってました。

$(function(){
    $('#sortable').sortable();
});

cursor:'move'でカーソルを移動用のカーソルに変更できますし、opacityで移動中透明にできますし、placeholderで、ドロップ先の場所を表示できますし、forcePlaceholderSizeで、placeholderを移動中の要素の大きさにすることができます。ドラッグ開始イベントなども沢山用意されていて、activateでとれますし、その他並び順が変更されたときのイベントなどもありますので、効率よく並び順の管理もできそうだなあと思います。並び順のデータも簡単にとれます。

詳細情報は、下記に詳しく日本語で載っております。 Sortable Sortableを使ってみよう

ちなみに、ドラッグ可能な要素を限定するのは、handleでできますが、これにボタンを設定しようと思ったら動きませんでした。もともとボタンはcancelでデフォルト設定されており、ボタンの上ではドラッグができないようになっていました。なので、cancel:falseにするか、ボタンをaタグでつくるかなどをするとボタンも使えるようになりました。

あと、並び順のデータをとるupdateですが、並び順を取得したい対象に、item_3といったid名をつける必要があります。item_1、item_2、といった感じで連番を振っていきます。item_1、item_2が並び順が変更された時点で、updateイベントが発動して、$(this).sortable('serialize')という命令にてその並び順を取得することができるようになります。例えばitemを追加した場合で、追加したアイテムに、item_3といったIDを振ったとしても、追加された時点では、updateイベントは発動しません。ですが、追加後に並び替えをしたら、item_3も$(this).sortable('serialize')の並び順データに登録されます。