Pocket
LINEで送る

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’)の並び順データに登録されます。

Pocket
LINEで送る

カテゴリー: プログラミング

1件のコメント

jquery ui sortable で並び順を取得する(serialize) | Logicky Blog · 06/25/2014 02:11

[…] ここで、item_1、item_2といった感じで連番ふるよといいましたが、どちらかというと並び替えの場合、並び替え対象でDBのIDで管理しないといけないと思いますので、item_idという感じにし […]

コメントください

関連記事

プログラミング

Go言語によるビットコインのフルノード実装btcdを調べる(2)

btcdを実行した際のプログラムの流れを最初から確認してみます。 se 続きを読む …

プログラミング

Go – leveldb

Goで使えるLevelDB。 syndtr/goleveldb ドキュ 続きを読む …

%d人のブロガーが「いいね」をつけました。