jquery.ui.sortableでhelper:cloneした元のDOMを表示させたい
掲題のことがしたかったけど、ちょっと詰まったのでメモ。
sortableのoptionのhelper:"clone"をすることで
「要素を複製して表示するghostingエフェクトが適用される」
というので、元の要素は表示されたままかと思ったら、defaultで非表示。
$(function(){ $("#sortable").sortable({ helper: "clone" )}; });
これだけだと、ドラッグしたときに元の位置にある要素はdisplay:noneの状態にされてしまう。
で、これをどうすれば表示させられるのかわからなかったんだけど
以下で普通にできた。
$(function(){ $("#sortable").sortable({ helper: "clone", start: function(event, ui){ ui.item.css("display", "block"); }; )}; });
http://stacktrace.jp/jquery/ui/interaction/sortable.html
こちらを参考に調べてたんだけど、
イベントハンドラの第2引き数がもつプロパティの説明
item 現在ドラッグ中の要素です。
というのに惑わされた。
helper:cloneをしている場合、今まさにドラッグしているそれは実はheplerプロパティで
itemプロパティが非表示状態になっているコピー元のDOMでした、っていうオチ。