jquery-ui

jQuery UIのsortableでtable並び替え(helperオプションで表示の修正)

jQuery UIのsortableを使ってtable要素を並び替えるの続きです。 例えば上のリンクのデモ画面を見ると、並び替えをしようとして行をドラッグすると移動中の行の幅が小さくなってしまっています。 例えば、このデモ画面を見ると、ドラッグ中にdivとかliの場合…

jQuery UIのsortableを使ってtable要素を並び替える

sortableの基本的な使い方はこちらを参照。 jQuery UIのsortableを使ってドラッグアンドドロップで並び替え 間違った例 一番シンプルに書こうとするとこうなるかと思います。 HTML <table id="sortable-table"> <tr> <th>番号</th><th>項目</th><th>備考</th> </tr> <tr> <td>1</td><td>項目1</td><td></td> </tr> <tr> <td>2</td><td>項目2</td><td></td> </tr> <tr> <td>3</td><td>項目3</td><td>なし</td> <…</tr></table>

jQuery UI の.disableSelection()がdeprecated(非推奨)になってる件

メモのつもりがちょっと長くなりました。jQuery UIのsortable()とかを使おうと思っていろいろ検索してみると、 $(".sortable").sortable(); $(".sortable").disableSelection(); みたいに書いている人が多くてそのまま使っちゃいそうなんですが、.disableSel…

jQuery UIのsortableでconnectWithオプションを指定して他の一覧へ移動する

他のsortable要素を指定することでその一覧に、対象の一覧内の要素を移動することができます。 http://api.jqueryui.com/sortable/#option-connectWithデモ画面このデモ画面では、 id="sortable-li-src"の一覧からid="sortable-li-dst"の一覧に移動できるよ…

jQuery UIのsortableでhandleオプションを指定してクリックできる要素を限定する

jQuery UIのsortableをデフォルトで使用すると、要素のどこでもクリックして並び替えを開始できます。(正確にはできない要素もあります、後述します) 特定の要素だけに限定させるオプションがhandleです。 http://api.jqueryui.com/sortable/#option-handl…

jQuery UIのsortableでplaceholderを設定

jQuery UIのsortableでplaceholderオプションを指定すると下図のようにドラッグ先の場所のCSSスタイルを設定することができます。 (図では項目2をドラッグアンドドロップしようとしています) placeholderオプション指定 http://api.jqueryui.com/sortable/…

jQuery UIのsortableを使ってドラッグアンドドロップで並び替え

よく一覧表示させておいてそれを並び替えさせたいときがあります。 今回はソート項目を指定して一括して並び替える方法ではなく、ある要素をドラッグアンドドロップで指定の位置に挿入しなおすということを容易にしてくれるjQuery UIのsortableというものを…