2008-08-28

script.aculo.us の Sortable にまつわる制限

table の行(tr)は、ダメなんですね。

http://github.com/madrobby/scriptaculous/wikis/sortable-create より、

Notes

Important: You can use Sortable.create on any container element that contains Block Elements, with the exception of TABLE, THEAD, TBODY and TR. This is a technical restriction with current browsers. A sortable nested somewhere inside a table won’t work well under IE unless the table has a “position:relative” style. If you use the css display: table property, sortable lists will work a little, but doesn’t allow true drag and drop of the elements.

TABLE, THEAD, TBODY と TR を除く、ブロック要素を含むどんなコンテナ要素でも、Sortable.create を使うことができます。これは、現在のブラウザーによる技術的な制限です。テーブルに「position:relative」というスタイルがないと、テーブルの中のどこかでネストされた sortable はIEではうまくいかないでしょう。もし、css の display: テーブルプロパティを使っている場合、要素の本当のドラッグアンドドロップを許容しないのを除いて、sortable リストは、少しだけ動くでしょう。

If you want your sortable list to be scrollable, wrap the list in a div and set the div to scrollable as apposed to making the ul element scrollable. Also, in IE you must set “position:relative” on the scrollable div.

sortable リストをスクロールできるようにしたい場合、リストを div で包んで、スクロール可能にした ul 要素と div をスクロール可能に設定してください。 また、IEでは、あなたは「position:relative」をスクロール可能なdivに設定しなければなりません。

Got it working using tbody as container and TR as the sortables (IE6 (pc) and Firefox (mac/pc).

tbody をコンテナとし、TR を使えば sortable は IE6(pc) と Firefox(mac/pc) で動作します。

A call to Sortable.create implicitly calls on Sortable.destroy if the referenced element was already a Sortable.

参照された要素がすでに Sortable であるならば、Sortable.createへの呼び出しは暗黙のうちにSortable.destroyを呼び出します。

tbody の中の tr では動作しました。引っかかる書き方だなぁ。

後で見つけたけど、こちら

マウスで握って並び替える。 - ザリガニが見ていた...。 さん

が、参考になりました。