onmousedownを契機にして親の領域をドラッグ可能とした場合、特になにも設定しなければ子供の領域で発生したonmousedownイベントも親に伝播するので、子供の領域をドラッグしても親がドラッグされる。しかし、そうなると子供の領域のテキストをドラッグして選択したい時もドラッグされてしまいテキスト選択ができない。
 そこで子供の領域で同じイベントを拾ってイベントの伝播をキャンセルする処理を記述すると、親にはイベントが伝播しないので子供の領域でのテキストの選択が可能になる。
 
 私がFlashでよくやる方法は少し異なる。
 Flashの場合は、上位のMCにイベントを設定すると、下位のMCでイベントを拾わなくなる(JSではそうはならない)ので、領域を親子にせず、兄弟の関係とし、両者の親のオブジェクトを別途用意する。そして外側の領域でイベントを受け取り“親を動かす”ようにする。それと同じことを実現したのがオレンジのBoxだ。
 但し、この方法では外側のエレメントと、内側のエレメントは兄弟関係にあるので内側のエレメントをabsoluteで位置指定しないと重なって表示されないというレイアウト上の面倒がある。
 
 やり方は2つ。
 1.親にイベントを設定し、全ての子エレメントで同じイベントをキャンセルする。
 2.親の下に、ドラッグ領域となる子エレメントを作り、そこにイベントを設定し、親のエレメントを移動する。
 
 IE6, FireFox1.5.0.4, Opera8.54

親の領域
子供の領域
親の領域
子供の領域
兄の領域
弟の領域