Class: Drag

マウスボタンが押されている間、要素の二つのCSSプロパティをマウスカーソルの位置に応じて変更できるようにします。

Implements:

Events, Chain

Dragメソッド: constructor

構文:

var myDragInstance = new Drag(el[, options]);

引数:

1. el - (要素) ドラッグしたい要素。
2. options - (オブジェクト, オプション) オプションオブジェクト。

オプション:

• grid - (整数: 初期値=false) ドラッグ中にグリッドにスナップする距離。
• handle - (要素: 初期値=渡された要素) ドラッグできる要素のハンドラーになる要素。
• invert - (真偽値: 初期値=false) ドラッグ開始時にリポートされる値を逆にするかどうか。
• limit - (オブジェクト: 初期値=false) 要素の動く範囲を制限するための、x、yプロパティを持ったオブジェクト。
• modifiers - (オブジェクト: 初期値={'x': 'left', 'y': 'top'}) CSS修正のための基点(i.e. 'left')となるx、yプロパティを持つオブジェクト。
• snap - (整数: 初期値=6) 要素がドラッグに反応を開始するために動かす距離。
• style - (真偽値: 初期値=true) 要素のCSSプロパティとして、モディフィアーを設定するか否か。
• unit - (文字列: 初期値='px') CSSの単位として適用される文字列。

イベント:

• beforeStart - Dragインスタンスがイベントを添附する前に発生します。ドラッグされる要素を引数として受け取ります。
• start - ユーザーがドラッグを開始したとき(マウスダウン時)に発生します。ドラッグされた要素を引数として受け取ります。
• snap - snapオプションに設定された値を超えてドラッグすると発生します。ドラッグされた要素を引数として受け取ります。
• drag - ドラッグのすべてのステップで発生します。引数としてドラッグされた要素を受け取ります。
• complete - ユーザーがドラッグを完了すると発生します。ドラッグされた要素を引数として受け取ります。

例:

var myDrag = new Drag('myDraggable', {
    snap: 0,
    onSnap: function(el){

        el.addClass('dragging');
    },
    onComplete: function(el){
        el.removeClass('dragging');
    }

});

//Adobeリーダー風のドラッグ&スクロールを作ります。
var myDragScroller = new Drag('myContainer', {

    style: false,
    invert: true,
    modifiers: {x: 'scrollLeft', y: 'scrollTop'}
});

注意点:

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

参考情報:

• W3Schools: CSS Units

Dragメソッド: attach

ハンドラーにマウスリスナーを添附し、要素をドラッグできるようにします。

構文:

myDrag.attach();

戻り値:

• (オブジェクト) Dragインスタンス。

例:

var myDrag = new Drag('myElement').detach(); //要素はまだドラッグできません。

$('myActivator').addEvent('click', function(){
    alert('Ok, now you can drag.');
    myDrag.attach();

});

参考情報:

• $, Element:makeDraggable, Drag:detach, Element:addEvent

Dragメソッド: detach

ハンドルからマウスリスナーを削除し、要素をドラッグできないようにします。

構文:

myDrag.detach();

戻り値:

• (オブジェクト) このDragインスタンス。

例:

var myDrag = new Drag('myElement');
$('myDeactivator').addEvent('click', function(){

    alert('No more dragging for you, Mister.');
    myDrag.detach();
});

参考情報:

• $, Element:makeDraggable, Element:addEvent

Dragメソッド: stop

Dragインスタンスからすべてのイベントを停止(削除)し、'complete'イベントを発生させます。

構文:

myDrag.stop();

例:

var myDrag = new Drag('myElement', {

    onSnap: function(){
        this.moved = this.moved || 0;
        this.moved++;
        if(this.moved > 100) {

            this.stop();
            alert("Stop! You'll make the Element angry.");
        }
    }

});

Native: Element

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

Elementメソッド: makeResizable

オプションを適用して、要素をドラッグ&リサイズできるようにします。

構文:

var myResize = myElement.makeResizable([options]);

引数:

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

戻り値:

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

例:

var myResize = $('myElement').makeResizable({
    onComplete: function(){

        alert('Done resizing.');
    }
});

参考情報:

• Drag