スポンサードリンク

Yahoo! User Interface Library - Drag and Drop Utility

Drag and Drop Utilityとは

ドラッグ＆ドロップ可能な要素を作るためのユーティリティーです。ドラッグやドロップのイベントハンドラーを間単に作成することが可能なフレームワークが用意されています。

詳しくはhttp://developer.yahoo.com/yui/dragdrop/のオリジナルを読まれるのがよいと思います。

Drag and Drop Utilityを使う前準備

必要なのは4つのファイルです。もちろんインストールは済ませておく必要があります。

<script type="text/javascript" src="your install path/yahoo-min.js"></script>
<script type="text/javascript" src="your install path/dom-min.js"></script>
<script type="text/javascript" src="your install path/event-min.js"></script>
<script type="text/javascript" src="your install path/dragdrop-min.js"></script>

YAHOO.util.DDをつかってドラッグする

YAHOO.util.DDはYAHOO.util.DragDropのサブクラスです。ElementIdを指定するだけで簡単にドラッグができるようになります。しかし、ドラッグできるようになるだけ大抵の場合はこれだけでは不十分です。

簡単なサンプル

動かす事のできる要素はcursor: move;にしておかないと分かりずらいです。

var dd1 = new YAHOO.util.DD("element1", "myGroup");
...
...
<div id="element1" style="width: 100px; height: 100px; background-color: #FFDEAD; cursor: move;"></div>

ドラッグに関する設定

setXConstraint, setYConstraintを使うことでドラッグできる範囲と、ドラッグの移動単位を指定できます。

setHandleElIdでElementIdを指定してドラッグできるポイントを指定できます。addInvalidHandleIdは逆の機能でドラッグできないポイントを作ります。この他にも同じ機能でaddInvalidHandleType, addInvalidHandleId, addInvalidHandleClass, removeInvalidHandleType, removeInvalidHandleId, removeInvalidHandleClassがありますが、Method名そのままで、Class名やタグ名でポイントを追加したり消したりできます。

var dd2 = new YAHOO.util.DD("element2", "myGroup");
// X軸の設定。左に100px, 右に500px, 50pxずつ動く
dd2.setXConstraint(100, 500, 50);
// Y軸の設定。上下にはドラッグできない
dd2.setYConstraint(0, 0);
// el2-handleを使ってドラッグする
dd2.setHandleElId("el2-handle");
// 逆にel2-handle以外の場所がドラッグできるようにする
// dd2.addInvalidHandleId("el2-handle");
...
...
<div id="element2" style="width: 100px; height: 100px; background-color: #FFDEAD;">
    <div id="el2-handle" style="position: absolute; width: 10px; height: 10px; line-height: 10px; background-color: red; cursor: move;"> </div>
</div>

YAHOO.util.DDProxyをつかってドラッグする

YAHOO.util.DDProxyはYAHOO.util.DDのサブクラスです。ドラッグだけでなく、YAHOO.util.DDTargetを用意することでドロップのイベントを捕まえることが可能になります。(実際にはYAHOO.util.DDでも可能なのかもしれませんが、onDragDropが発生しなかったので)

コンストラクタ

(booelan) resizeFrame	ドラッグ中の分身を自動で元の要素とサイズをそろえる。default: true
(boolean) centerFrame	ドラッグ中のカーソルが分身の中央にくるようにする。default: false
(string) dragElId	ドラッグ中の分身を自分で指定する。

dragElIdを指定するときは対象を、visibility: hidden;にしておき普段見えないようにしておく。

var dd3 = new YAHOO.util.DDProxy("element3", "myGroup");
var dd4 = new YAHOO.util.DDProxy("element4", "myGroup", {dragElId: "el4-drag", centerFrame: true});
var dd5 = new YAHOO.util.DDProxy("element5", "myGroup", {dragElId: "el5-drag", resizeFrame: false});
...
...
<div id="el4-drag" style="visibility: hidden; background-color: #f3f3f3; border: 1px solid black;">
自分で指定
</div>
<div id="el5-drag" style="width: 50px; height: 50px; visibility: hidden; background-color: #f3f3f3; border: 1px solid black;">
サイズも自分で指定
</div>

YAHOO.util.DDProxyとYAHOO.util.DDTargetでドラッグ＆ドロップする

YAHOO.util.DDTarget

YAHOO.util.DDTargetでドロップ先をつくります。ドラッグはできませんが、ドロップしたことをイベントハンドラで取得可能になります。

var ddtarget1 = new YAHOO.util.DDTarget("target1", "myGroup");
...
...
<div id="target1"></div>

YAHOO.util.DDProxyを拡張してカスタマイズ

次にYAHOO.util.DDProxyのサブクラス、DDProxyTestをつくります。この際にYAHOO.extend(サブクラス, スーパークラス)を使うと便利です(YUIの拡張方法)。これによって、ドラッグ＆ドロップのイベントハンドラをカスタマイズします。

DDProxyTest = function(id, sGroup, config) {
    if (id) {
        this.init(id, sGroup, config);
        this.initFrame();
    }
};
YAHOO.extend(DDProxyTest, YAHOO.util.DDProxy);

さらににメソッドをオーバーライドしてカスタマイズします。オーバーライドは一般的な以下の方法で行います。

DDProxyTest.prototype.onMouseDown = function (event) {
    // 左クリックをした瞬間。引数はmousedown event
};

DDProxyTest.prototype.startDrag = function (x,y) {
    // ドラッグ開始の瞬間。このイベントはデフォルトで
    // 3ピクセルの移動 or 1秒以上左クリックを継続した時に発生する。
    // 引数はカーソルの位置
};

DDProxyTest.prototype.onDrag = function (event) {
    // ドラッグしている最中。引数はmousemove event
};

DDProxyTest.prototype.onDragEnter = function (event,targetId) {
    // ドラッグした物がターゲットに接触した瞬間。
    // 引数はmousemove eventとターゲットのElementId
};

DDProxyTest.prototype.onDragOver = function (event,targetId) {
    // ドラッグした物がターゲットの上にいる時。
    // 引数はmousemove eventとターゲットのElementId
};

DDProxyTest.prototype.onDragOut = function (event,targetId) {
    // ドラッグした物がターゲットの上から外れた瞬間。
    // 引数はmousemove eventとターゲットのElementId
};

DDProxyTest.prototype.onDragDrop = function (event,targetId) {
    // ドラッグした物をターゲットの上にドロップした瞬間。
    // 引数はmousemove eventとターゲットのElementId
};

DDProxyTest.prototype.endDrag = function (event) {
    // ドラッグを止めた瞬間。
    // 引数はmouseup event
};

DDProxyTest.prototype.onMouseUp = function (event) {
    // ドラッグを止めた瞬間。endDragと同じに見えるが、クリックをしただけだとstartDrag, endDragが発生しな。
    // 引数はmouseup event
};

サンプル

実際に上記のイベントが発生する様子を見られるようにしたサンプルを用意しました。

サンプルページを見る