これまた数ある車輪の再発明のうちの一つだけど、習作をかねて
使い方
<script src="http://blog.livedoor.jp/dankogai/js/resize.js"></script> <div class="resizable"> この要素がリサイズ可能に </div> <script>make_dom_resizable('resizable');</script>
要は、JS fileをロードしておいて、最後にmake_dom_resizable()を呼ぶだけ。引数が、リサイズ指定したいDOMのクラス名になります。省略するとresizableをデフォルトとします。
見ての通り、右端をドラッグすると、その要素がリサイズされます。右端をダブルクリックすると、元の大きさに戻ります。
Source:
感想
それにしても、UIのプログラムはなんであれ難しい。プログラムそのものも去ることながら、どのあたりでキリにしようか、というのが一番難しい。ほっとくとあれもつけようこれもつけようとすぐなってしまいます。
例によってCodeReposに上がっています。添削きぼんぬ。
Dan the JavaScripter
高速ドラッグとかしてしまうとonmouseupイベントを取れなくなるのか、押しっぱなしのようにresizeが延々と続きます。
windowを消すまで終わりません。
また、IE7では動かないような気がしますが。