Yahoo! UI Library:: Drag and Dropの訳

http://developer.yahoo.net/yui/dragdrop/index.html

Yahoo! UI Library: Drag and Drop

The Drag and Drop component is a utility that helps you create a draggable interface efficiently, buffering you from much of the grunt work and enabling you to focus on the interesting logic surrounding your particular implementation. This component enables you to create a variety of standard draggable objects with just a few lines of code and then, through some simple extensions of the base library, to add your own specific implementation logic.

This page describes the Drag and Drop component and provides examples of its use. It contains these sections:

Drag&Dropコンポーネントは　ドラッグ可能なインタフェースを効率的に作れるユーティリティです。めんどくさい作業をしなくて済むようになるので、自分のやりたい作業に集中できるようになりますね。数行のコードを書くだけで、ドラッグ可能なオブジェクトをたくさん作り出すことができ、またベースとなるライブラリのちょっとした拡張機能を使えば　オリジナルな実行ロジックを追加することができます。

このページはDrag&Dropコンポーネントについて載せています。またサンプルの使用法も載せています（以下略)

Getting Started

<!-- Namespace source file --> 
<script src = "http://yourwebsite.com/util/YAHOO.js" ></script>

<!-- Dependency source files --> 
<script src = "http://yourwebsite.com/util/dom.js" ></script>
<script src = "http://yourwebsite.com/util/event.js" ></script>

<!-- Drag and Drop source file --> 
<script src = "http://yourwebsite.com/widget/dragdrop.js" ></script>

Drag&Dropコンポーネントは、YAHOO.util.DD.-- で定義されます。

Basic Drag and Drop

To enable a simple drag and drop of any DOM element, use this code:

var dd1 = new YAHOO.util.DD("elementid1");

In this example the DD object is created with the ID of a DOM element (elementid). This enables that DOM element to be dragged and dropped.

To use another DOM element as a proxy for the actual dragged element, use the DDProxy object:

var dd2 = new YAHOO.util.DDProxy("elementid2");

In this example the DDProxy object is created with the ID of a DOM element. The proxy object represents the DD element during a drag.

To complete the drag and drop, designate a legal drop target by creating a DDTarget object.

var dd3 = new YAHOO.util.DDTarget("elementid3");

In this example the DDTarget object is created with the ID of a DOM element that will serve as the target for the drag.

ドラッグ＆ドロップ基本

DOMエレメントで、ドラッグ＆ドロップをするにはこんなコードを使います。

var dd1 = new YAHOO.util.DD("elementid1");

このサンプルではDDオブジェクトはDOMエレメントのIDをもとにつくっています。これでDOMエレメントをドラッグ＆ドロップできるようになります。

実際にドラッグするエレメントの代替として他のDOMエレメントを使うには、DDProxyオブジェクトをコンストラクトします。

*proxy = 代替

var dd2 = new YAHOO.util.DDProxy("elementid2");

ドラッグ＆ドロップを完了するには、DDTargetオブジェクトを作り出してドロップターゲットを指定します。

var dd3 = new YAHOO.util.DDTarget("elementid3");

このサンプルでは　DDTargetオブジェクトはドラッグのターゲットとなるDOM要素のIDから作り出されます。

Using Interaction Groups

Each drag and drop object belongs to one or more interaction groups. Drag and drop events fire only when the dragged element interacts with other objects that share a group.

// No group specified so dd0 is assigned to the "default" group
var dd0 = new YAHOO.util.DD("elementid0"); 
// dd1 is a member of group1
var dd1 = new YAHOO.util.DD("elementid1", "group1"); 
// dd2 is a member of group2
var dd2 = new YAHOO.util.DD("elementid2", "group2"); 
// dd3 is a member of both group1 and group2
var dd3 = new YAHOO.util.DD("elementid3", "group1");
dd3.addToGroup("group2"); 

インタラクション・グループを使う

ドラッグ＆ドロップオブジェクトは一つ以上のインタラクション・グループに属します。ドラッグ＆ドロップ・イベントが起こるのは、ドラッグしたエレメントが他のオブジェクトと（ドラッグエレメントと同じグループである）相互に干渉する時だけです。

// 引数にグループが指定されていないので"default"グループに属する
var dd0 = new YAHOO.util.DD("elementid0"); 
// dd1はグループ１
var dd1 = new YAHOO.util.DD("elementid1", "group1"); 
// dd2はグループ２
var dd2 = new YAHOO.util.DD("elementid2", "group2"); 
// dd3はグループ１とグループ２
var dd3 = new YAHOO.util.DD("elementid3", "group1");
dd3.addToGroup("group2"); 

Important Events

Events that are triggered in the drag and drop cycle:

onMouseDown: Provides access to the mousedown event. The mousedown does not always result in a drag operation.
startDrag: Occurs after a mouse down and the drag threshold has been met. The drag threshold default is either 3 pixels, or 1 second of holding the mousedown.
onDrag: Occurs every mousemove event while dragging.
onDragEnter: Occurs when the dragged object first interacts with another targettable drag and drop object.
onDragOver: Fires every mousemove event while over a drag and drop object.
onDragOut: Fires when a dragged object is no longer over an object that had the onDragEnter fire.
onDragDrop: Fires when the dragged objects is dropped on another.
endDrag: Fires on the mouseup event after a drag has been initiated (startDrag fired).
onMouseUp: Fires on the mouseup event whether or not a drag was initiated.

ドラッグ＆ドロップのサイクルの中で、トリガとなるイベント

onMouseDown: マウスダウンイベントへのアクセスを設ける。マウスダウンは常にドラッグ操作になるわけではない？
startDrag:マウスダウンイベント後に発生し、ドラッグの限界？境界？???ドラッグとなる境界のデフォルト値は、3ピクセル動かすか、１秒間マウスダウンし続けること
onDrag:ドラッグしている間は、どんなマウスの動きでも発生します<span style="font-weight:bold;">onDragEnter: ドラッグしたオブジェクトが、ターゲットにした他のドラッグ＆ドロップオブジェクトに初めて干渉したとき
onDragOver: ドラッグ＆ドロップオブジェクトの上にいる間は、どんな動きでも反応し発生します
onDragOut: Fドラッグしたオブジェクトが、onDragEneterを発生させたオブジェクトから外れた時に発生します
onDragDrop: ドラッグしたオブジェクトとが他のオブジェクト上にドロップされたときに発生します
endDrag: ドラッグが始まったとき、つまりstartDragが起こったあとに、マウスアップイベント上で発生します
onMouseUp: マウスアップイベント上で発生します。？？？

Point Mode versus Intersect Mode

By default, the drag and drop interaction is defined by the location of the mouse cursor during the drag operation (Point mode). Intersect mode takes into account the dragged element's dimensions, reporting when that element intersects with any other drag and drop element in its group or groups.

You can switch from point mode to intersect mode at any time by setting the DDM.mode property to DDM.INTERSECT.

A major side effect of switching to intersect mode is that it makes it far more likely that multiple drag and drop objects are interacting at once. You must determine which interaction is most relevant to you. Because of this, the important events are handled differently in each mode, as noted in this table:

<;/tr>

Moment	Point Mode	IntersectMode	Notes
onMouseDown	e	e	e is the mousedown event
startDrag	x,y	x,y	x,y is the location of the mousedown
onDrag	e	e	e is the mousemove event
onDragOver	e,id	e,DDArray	e is the mousemove event; id is the drag and drop object involved; DDarray is an array of drag and drop objects
onDragOut	e,id	e,DDArray	e is the mousemove event; id is the drag and drop object involved; DDarray is an array of drag and drop objects
onDragDrop	e,id	e,DDArray	e is the mouseup event; id is the drag and drop object involved; DDarray is an array of drag and drop objects
endDrag	e	e	e is the mouseup event; id is the drag and drop object involved; DDarray is an array of drag and drop objects
onMouseUp	e	e	e is the mouseup event; id is the drag and drop object involved; DDarray is an array of drag and drop objects

Point mode returns the id of the drag and drop object that was involved, while intersection mode returns an array of drag and drop objects instead. Note: it is possible to have stacked drag and drop objects. In point mode, a drop on two stacked items would result in two onDragDrop events being fired; in intersect mode only one event is triggered. The reason the drag and drop objects are passed in intersection mode is that they contain properties about the interaction that can help determine the most appropriate action when there are more than one dd objects involved. The cursorIsOver property is true if the mouse cursor was over the dd element when the interaction happened. Often this will be the more relevant match. The overlap property is a YAHOO.util.Region object that specifies the location and dimensions of the overlap of the two dd objects. This can be used to determine which element had more overlap (YAHOO.util.Region.getArea). The getBestMatch method uses this information to try to guess which among the multiple matches is the most significant. This will return either the first match it finds that has the cursor over it, or the one with the largest overlap. ポイントモード VS インターセクトモード（交差モード) 初期設定では、ドラッグ＆ドロップ・インターアクションがドラッグ操作中のマウスカーソル「点」の位置によって定義されます。これがポイントモードです。交差モードではドラッグした要素の「面」も考慮に入れます。？同じグループに属しているドラッグ＆ドロップエレメントと干渉したことも知らせてくれます。 DDMのモードプロパティをDDM.INTERSECTと設定することで、ポイントモードと交差モードの切り替えがいつでもできます。 交差モードに変えて得られる副次的効果のうちで主要なものは、アクション中?の複数のドラッグ＆ドロップオブジェクトを一度で??? どっちのモードがいいかはご自分で判断してください。モードによって主要なイベントのハンドラが違います。以下の表に記しておきます。

Moment	Point Mode	IntersectMode	Notes
onMouseDown	e	e	e mousedownイベント
startDrag	x,y	x,y	x,y はmousedownした場所
onDrag	e	e	e はmousemoveイベント
onDragOver	e,id	e,DDArray	e はmousemoveイベント IDは巻き込んだオブジェクトのID; DDarray はドラッグ&ドロップオブジェクトの配列
onDragOut	e,id	e,DDArray	e はmousemoveイベント<BR> IDは巻き込んだオブジェクトのID; DDarray はドラッグ&ドロップオブジェクトの配列
onDragDrop	e,id	e,DDArray	e はmouseupイベント IDは巻き込んだオブジェクトのID; DDarray はドラッグ&ドロップオブジェクトの配列
endDrag	e	e	e はmouseupイベント IDは巻き込んだオブジェクトのID; DDarray はドラッグ&ドロップオブジェクトの配列
onMouseUp	e	e	e はmouseupイベント IDは巻き込んだオブジェクトのID; DDarray はドラッグ&ドロップオブジェクトの配列

ポイントモードでは、アクションに巻き込んだドラッグ＆ドロップオブジェクトのIDを返します。 交差モードではアクションに巻き込んだドラッグ＆ドロップオブジェクトの配列を返します。 注意：スタックしたオブジェクトを持っている場合について： ポイントモードでは、二つのスタックされたオブジェクトをドロップすると、二つのonDragDropイベントが起こることになります。 交差モードではイベントは一つしか起こりません。 交差モードでドラッグ＆ドロップオブジェクトが引渡される理由は、このオブジェクト群がインタラクションに関するプロパティを持ってるからです。プロパティがあれば、もっとたくさんのDDオブジェクトが関わった場合でも、適切なアクションを決定できます。 インタラクションが起こったときマウスカーソルがDDエレメントの上にあった場合、cursorIsOverのプロパティはtrueになります。？？ オーバーラッププロパティは、YAHOO.util.Regionオブジェクトです。YAHOO.util.Regionオブジェクトは二つのDDオブジェクトのオーバーラップである位置と寸法を指定します。これによって、どの要素がオーバーラップをもってるかを見極めます（YAHOO.util.Region.getArea) getBestMatch()メソッドはこの情報を使って、複数マッチしたものから一番重要そうなものを推測しようとします。？？このメソッドはカーソルオーバーで見つけたもので、一番最初にマッチしたもの、もしくは一番大きいオーバーラップを返します。

Notes

The complexity of the application logic in the important moments of drag and drop can have significant performance implications. This is particularly true of the onDrag event ... this fires constantly while a drag is occurring, so anything that happens here should be optimized as much as possible.

Getting and setting the position of elements get progressively more expensive the deeper the element is in the DOM. If you are running into performance issues using DD, consider using DDProxy; the proxy element is absolutely positioned in the body, which is the easiest to position.

Intersect mode adds additional additional object creation and Math calls that can slow performance.

注意書き

ドラッグ＆ドロップの重要な局面に対して複雑なアプリケーションロジックを設定しておくは、重要な意味があります。これはとくにonDragイベントに当てはまることです。このonDragイベントはドラッグ中は常にイベントを発生し続けるので、どんなものでも可能な限り最適化しておいた方がいいのです。

要素の位置取得と設定は、DOMの階層が深くなるにつれてだんだんと負荷が高くなります。もしDDオブジェクト（？クラス）を使っていてパフォーマンスに問題が生じた場合は、DDProxyを使うことを考えてください。proxy要素は、body要素の中で絶対位置指定されているので、位置指定が一番楽チンなのです。

交差モードは追加追加でオブジェクトを足していくので、Math（クラス？）のせいでパフォーマンスの低下を招くことがあります。