Extjsのdragzoneが知りたい
今回は,Ext.dd.dragzoneが知りたい
D&D関係が色々種類あって,何が何か分からん
Extjsを使ったD&Dって,いろんな書き方が出来るらしい.
とりあえず,今回はdragzoneが知りたい.
"extjs dragzone"でググってみたら,日本語ドキュメントは3件ですよ,3件.
少なすぎ!
ましてや,dragzoneについて書いてある日本語ドキュメントは0だし.
Let's $7a|2T(start)
ハッカー文字とか,懐かしい..
って,そんなことはどうでもいいとして,とりあえずチュートリアルを読んでみる.
http://extjs.com/learn/Tutorial:Custom_Drag_and_Drop_Part_1
Ext.get(id).dd = new Ext.dd.DDProxy...って記述があるけど,古いバージョンの書き方なのかな?
ドキュメント見ても,Ext.Element.ddってプロパティないし.
今なら,.ddの代わりにinitDDProxyなんだろな
http://extjs.com/learn/Tutorial:Custom_Drag_and_Drop_Part_2
DDProxyとDropZoneを別で定義して,グループ名を合わせれば,1つのD&Dの動きが定義できるわけね.おk
http://extjs.com/learn/Tutorial:Custom_Drag_and_Drop_Part_3
D&Dの時のデータの受け渡し方法として,DDをnewするときのconfigを拡張(override)するやり方があるってことね.おk
http://extjs.com/learn/Tutorial:Advanced_Custom_Drag_and_Drop_Part_1
Ext.dd.DragZoneって,DDProxyを内部に保持するクラスなわけね.
で,DragZoneってのは,Dragするelementのparentを登録するわけね.
で,それを拡張して使うってことね.おk
http://extjs.com/learn/Tutorial:Advanced_Custom_Drag_and_Drop_Part_2
DropTargetを拡張して使うわけね.
Ext.dd以下を一覧にしてみよう
Ext.dd.* | サブクラス | 説明 |
---|---|---|
DragDrop | DD, DDTarget | Defines the interface and base operation of items that that can be dragged or can be drop targets. It was designed to be extended, overriding the event handlers for startDrag, onDrag, onDragOver and onDragOut. Up to three html elements can be associated with a DragDrop instance:... |
DD | DDProxy | A DragDrop implementation where the linked element follows the mouse cursor during a drag. |
DDProxy | DragSource | A DragDrop implementation that inserts an empty, bordered div into the document that follows the cursor during drag operations. At the time of the click, the frame div is resized to the dimensions of the linked html element, and moved to the exact location of the linked element. References to the "frame" element refer to the single proxy element that was created to be dragged in place of all DDProxy elements on the page. |
DragSource | DragZone | A simple class that provides the basic implementation needed to make any element draggable. |
DragZone | TreeDragZone | This class provides a container DD instance that proxies for multiple child node sources.By default, this class requires that draggable child nodes are registered with Ext.dd.Registry. |
DDTarget | DropTarget | A DragDrop implementation that does not move, but can be a drop target. You would get the same result by simply omitting implementation for the event callbacks, but this way we reduce the processing cost of the event listener and the callbacks. |
DropTarget | DropZone | A simple class that provides the basic implementation needed to make any element a drop target that can have draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided. |
DropZone | TreeDropZone | This class provides a container DD instance that proxies for multiple child node targets.By default, this class requires that child nodes accepting drop are registered with Ext.dd.Registry. |
大杉.
リストにしてみよう
- DragDrop
- DD
- DDProxy
- DragSource
- DragZone
- DragSource
- DDProxy
- DDTarget
- DropTarget
- DropZone
- DropTarget
- DD
なんとなく全体を把握できた気がする.
あれ,当初の目的は,DragZoneについて理解することじゃ・・・ま,いっか.