Class: Drag.Move

要素をドラッグするために、Dragクラスをベースに関数を追加し、拡張したもの。スナップとドロップをサポートしています。 Dragからメソッド、プロパティ、オプション、イベントを継承します。

注意点:

Drag.Moveを使うには、標準準拠モードでページを作成する必要があります。

Drag.Moveメソッド: constructor

構文:

var myMove = new Drag.Move(myElement[, options]);

引数:

  1. el - (要素) ドラッグを適用する要素。
  2. options - (オブジェクト, オプション) オプションオブジェクト。以下を参照のこと。

オプション:

すべてのベースとなるDragオプションに以下を追加したもの:
  • container - (要素) 要素が渡されると、ドラッグできる範囲はこの要素の位置とサイズによって制限されます。
  • droppables - (配列) ドラッグしている要素をドロップできる要素。この要素のいずれかに働きかけると、クラスの持つdrop、enter、leaveイベントが発生します。

イベント:

  • drop - 要素がドロップされると発生します。ドラッグされていた要素と、ドロップされた要素の2つが引数として渡ります。もし何もない場所にドロップした場合第2引数はnullになります。
  • leave - ドラッグしている要素がdroppable要素の領域内から去ったときに発生します。
  • enter - ドラッグしている要素がdroppable要素の領域内に入ったときに発生します。

例:

var myDrag = new Drag.Move('draggable', {

    droppables: '.droppable',

    onDrop: function(element, droppable){
        if (!droppable) console.log(element, ' dropped on nothing');
        else console.log(element, 'dropped on', droppable);
    },

    onEnter: function(element, droppable){
        console.log(element, 'entered', droppable);
    },

    onLeave: function(element, droppable){
        console.log(element, 'left', droppable);
    }

});

注意点:

  • Drag.Moveを使うには標準準拠モードでページを作成する必要があります。
  • Drag.MoveはCSSのposition指定absoluteとrelativeをサポートしています。positionが指定されていない場合、absoluteがセットされます。

デモ:

参考情報:

Drag.Moveメソッド: stop

要素がdroppable要素の上にあるかをチェックして、該当すればdropイベントを発生させます。そうでなければ、この要素に添附されている'emptydrop'イベントを発生させます。最終的にDragクラスのstopメソッドを実行します。

構文:

myMove.stop();

例:

var myElement = $('myElement').addEvent('emptydrop', function(){

    alert('no drop occurred');
});

var myMove = new Drag.Move(myElement, {

    onSnap: function(){ //MooToolの継承ルールにより、すべてのDragイベントを使うことができます。
        this.moved = this.moved || 0;
        this.moved++;
        if(this.moved > 1000){

            alert("You've gone far enough.");
            this.stop();
        }
    }

});

参考情報:

Native: Element

$関数で取得したDOM要素がこれらのすべてのメソッドを使えるようにするカスタムネイティブです。

Elementメソッド: makeDraggable

提供されたオプションを使って、要素にドラッグ&ムーブの機能を付け加えます。

構文:

var myDrag = myElement.makeDraggable([options]);

引数:

  1. options - (オブジェクト, オプション) 受け付けるオプションはDragとDrag.Moveを参照のこと。

戻り値:

  • (オブジェクト) 生成されたDrag.Moveインスタンス。

例:

var myDrag = $('myElement').makeDraggable({

    onComplete: function(){
        alert('done dragging');
    }
});

参考情報:

このドキュメントはMooToolsのドキュメントを元に高橋文樹が翻訳（ちょっと改変）しました。
本家と同じく、Attribution-NonCommercial-ShareAlike 3.0ライセンスで公表されています。

トップに戻る