DD
先のログに書いたが、これまでのサンプルなどを「一まとめのコード」にしようとしている。 そのせいで、ログの更新も滞りがち。以前にサンプリングした、YUIのOfficial Examplesの中にDrag Dropの面白いサンプル（これ）があったので、それをモディファイし…
YUIのExample「DataTable Control: Showing, Hiding, and Reordering Columns」へのリンク 先の「DataTable Control: Showing, Hiding, and Reordering Columns（その１）」では、列のDrag and Dropだけに着目したが、ここでは、YUIのExampleそのものについ…
YUIのExample「DataTable Control: Showing, Hiding, and Reordering Columns」へのリンク このExampleは、いくつかの要素が絡み合っている。 YUIのExampleは、大きく 列をDrag and Dropで移動する。 ダイアログボックスを表示して、列の表示・非表示を選択…
クリックする要素が矩形でない場合、ほんとうにその要素をつかんだかどうかを厳密に判別したい場合があると仮定する。このような場合に使用するのが、TAHOO.util.DDによういされたclickValidator()。 YUIのサンプルは、クリックする対象を円（gifで描画され…
2009/6/7 tetsuya_odaka js中のコメントの修正=================================================== このInteraction Groupを用いたExampleも、さきのReordering a Listと同じくタフなExample。 解析してソースに注釈をいれるのに１時間半もかかってしまっ…
この例（Staying in a Region）は、タイトルが示すとおり、以下の図がにある小さい矩形が、同色のキャンバス（canvas）の中だけしか動けない、というものである。 サンプルソースは、意外と地道にかかれていて、キャンバス内を動く要素は、YAHOO.util.DDを継…
さきほどの例（DD: Reordering a List）を見た際、冗長なプログラムと思ったが、以下の画面は、前の例で作成したDDList( YAHOO.util.DDProxyを継承して作成）をまったく変えずに、タグとStyleのみ変更して作成したもの。 List1の中にList2が入れ子になってい…
YUIのDrag and Dropリストを並べ替えるサンプル（サンプルページはこちら）。ソースコードを見ると、いきなり（前のサンプルに比べて）えげつないコードが書かれていることがわかる。 Drag and Dropは、YAHOO.util.DDProxyを継承して作成されたオブジェクト…
Proxy Elementとは、ドラッグされるときに元の要素の代わりとして生成されるオブジェクトのことである。 これを利用することで、元の要素（元のデザイン）を崩さずにDrag and Dropが可能になる。 Proxyは、 dd = new YAHOO.util.DDProxy("element_id"); とい…
以前のログに書いたが、ドラッグされる要素のZ軸は、DDのインスタンス化の順で決定する。この例は、YAHOO.util.DDを継承し、startDrag、endDragメソッドをoverrideして、DragされたエレメントのZ軸が一番上にくるように改造している。 YAHOO.util.DDのAPIド…
YUIに最初に掲示されているサンプルは、３つのDraggableなDivを作成するもの。超基本的ではあるが、サンプリングしておく。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Ajax_Sampling</TITLE> <style type="text/css"> /* Drag and Dropする要素に共通のスタイル*/ .dd-demo {…</meta></meta></head></html>
Yahoo Developer Networkも機嫌を直したようなので、Drag and Drop(DD)のサンプリング。 DDのトップページを概観。まず、使用するjsファイルは、 <script type="text/javascript" src="scripts/yahoo-dom-event/yahoo-dom-event.js" > </script>
dd = new YAHOO.util.DD("dd-demo-1"); でインスタンス化された要素は、その枠内のどこでMousedownしてもDragを開始できる。Handle（YUIのページはこちら）とは、特定の域でMousedownすることにDragの開始を制限する方法である。 Handleには、InnerhandleとO…
