MooTools 1.2のDrag.Moveによるドラッグ＆ドロップ
8827 ワード
他のプラグインと似ています.まず、「new」キーを使用してDrag.Moveオブジェクトを作成し、変数に値を付けてから、オプションとイベントを定義します.これがすべてですが、以下の例で説明したIEのCSS怪異現象に注意してください.
基本的な使い方
Drag.Move
自分のドラッグオブジェクトを作成するのは簡単です.次の例を少し見ればいいです.どのようにしてDrag.MoveオブジェクトのオプションとイベントをDragオプションとイベントから分離したのかに注意してください.Drag.MoveクラスはDragクラスを拡張するので、Dragクラスのオプションとイベントを受け入れることができます.今日は特にDragクラスについて話すつもりはありませんが、役に立つ選択肢やイベントを検討してみましょう.次のコードを見て、その詳細を勉強します.
参照コード:
ここでちょっとお邪魔しますが・・・
Drag.Moveオプション
Drag.Moveオプションには2つの重要な要素があります.
droppables――ドラッグ関連イベントを登録する格納可能な要素のセレクタを設定します.
container――要素をドラッグする容器を設定します(要素が常に容器内にあることを保証できます)
このオプションを設定するのは簡単です.
参照コード:
ドラッグ可能な要素が含まれ、ドラッグアンドドロップ可能な要素を受け入れるクラスができます.
Drag.Moveイベント
このイベントでは、オブジェクトをドラッグし始めたり、置く準備をしたりするなど、異なる点で関数をトリガーすることができます.各Drag.Moveイベントは、ドラッグ要素とドラッグ要素を受け入れる要素(droppableと呼ばれています)をパラメータとして渡します.
onDrop――このイベントは、ドラッグ可能な要素がドラッグ可能な要素の中に入ったときにトリガーされます.
onLeave――このイベントは、ドラッグ可能な要素がドラッグ可能な要素から離れたときにトリガーされます.
onEnter――このイベントは、ドラッグ可能な要素がドラッグ可能な要素に入ったときにトリガーされます.
これらのイベントの各イベントは、対応するイベントがトリガーされたときに呼び出される関数を呼び出します.
参照コード:
いくつかのDragイベントとオプション
Dragには多くの選択肢とイベントがありますが、ここではほんの一部しか見ていません.
snap――オプション
snapオプションを使用すると、ユーザーのマウスが少なくとも何画素移動するかを設定してドラッグを開始できます.デフォルトは6で、額は任意の数値または値が数値の変数に設定できます.明らかに、snapを1000に設定するなど、合理的な制限がありますが、ユーザー体験をカスタマイズする際に役立ちます.
参照コード:[][コードを保存]
var myDrag = new Drag.Move(dragElement , {
//Dragオプション
snap: 10
});
handle――オプション
handleは、ドラッグ要素に制御オブジェクトを追加できます.このコントロールオブジェクトは、[キャプチャ](Drag)を受け入れる唯一の要素となり、他の要素を使用して他のことをすることができます.制御オブジェクトを設定するには、この要素を呼び出すだけです.
参照コード:
onStart――イベント
onStartは名前と同じで、ドラッグを開始するとこのイベントをトリガーします.大きなsnapを設定すると、このイベントはマウスが要素から指定されたsnap値ほど離れるまでトリガーされません.
参照コード:
onDarg――イベント
このonDragイベントは、要素をドラッグすると連続的にトリガーされます.
参照コード:
onComplete――イベント
最後にonCompleteイベントは、ドラッグ要素を置くとトリガーされ、ドラッグ要素を受け入れる要素の内部に置くかどうかにかかわらずトリガーされます.
参照コード:
コードの例
これらのコードを1つの方法で組み合わせて、異なるイベントがトリガーされると、異なるコンテンツを強調表示し、上に示すオプションを使用してDrag.Moveオブジェクトを構成します.
参照コード:
注意CSS:IEでは、Drag.Moveのコンテナを適切に登録するために、以下のCSSでその位置を明確に指摘する必要があります.最も重要なのは、コンテナの位置を「position:relative」に設定し、ドラッグ可能な要素の位置を「position:absolute」に設定し、ドラッグ可能な要素のleftとtopプロパティを設定することです.他のブラウザに対して構築し、このルールに従っている場合は、このセクションを無視できます.
参照コード:
HTMLを構築します
参照コード:
もっと勉強して・・・
ここでは、ドキュメントに関する章をいくつか説明します. Drag Drag.Move
あなたが最初に必要なものをすべて含むzipパッケージをダウンロードします.
MooTools 1.2コアライブラリ、MooTools 1.2拡張ライブラリ、関数を含む外部JavaScriptファイル、スタイルを定義する外部CSSファイル、簡単なHTMLファイル、上記の例が含まれています.
基本的な使い方
Drag.Move
自分のドラッグオブジェクトを作成するのは簡単です.次の例を少し見ればいいです.どのようにしてDrag.MoveオブジェクトのオプションとイベントをDragオプションとイベントから分離したのかに注意してください.Drag.MoveクラスはDragクラスを拡張するので、Dragクラスのオプションとイベントを受け入れることができます.今日は特にDragクラスについて話すつもりはありませんが、役に立つ選択肢やイベントを検討してみましょう.次のコードを見て、その詳細を勉強します.
参照コード:
var myDrag = new Drag.Move(dragElement, {
// Drag.Move
droppables: dropElement,
container: dragContainer,
// Drag
handle: dragHandle,
// Drag.Move
// Drag.Move ，
// （droppable）
onDrop: function(el, dr) {
// id
alert(dr.get('id'));
},
// Drag
// Drag
onComplete: function(el) {
alert(el.get('id'));
}
});
ここでちょっとお邪魔しますが・・・
Drag.Moveオプション
Drag.Moveオプションには2つの重要な要素があります.
droppables――ドラッグ関連イベントを登録する格納可能な要素のセレクタを設定します.
container――要素をドラッグする容器を設定します(要素が常に容器内にあることを保証できます)
このオプションを設定するのは簡単です.
参照コード:
// id
var dragElement = $('drag_element');
// class
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
// Drag.Move
var myDrag = new Drag.Move(dragElement , {
// Drag.Move
// droppable droppables
droppables: dropElements ,
//
container: dragContainer
});
ドラッグ可能な要素が含まれ、ドラッグアンドドロップ可能な要素を受け入れるクラスができます.
Drag.Moveイベント
このイベントでは、オブジェクトをドラッグし始めたり、置く準備をしたりするなど、異なる点で関数をトリガーすることができます.各Drag.Moveイベントは、ドラッグ要素とドラッグ要素を受け入れる要素(droppableと呼ばれています)をパラメータとして渡します.
onDrop――このイベントは、ドラッグ可能な要素がドラッグ可能な要素の中に入ったときにトリガーされます.
onLeave――このイベントは、ドラッグ可能な要素がドラッグ可能な要素から離れたときにトリガーされます.
onEnter――このイベントは、ドラッグ可能な要素がドラッグ可能な要素に入ったときにトリガーされます.
これらのイベントの各イベントは、対応するイベントがトリガーされたときに呼び出される関数を呼び出します.
参照コード:
var dragContainer = $('drag_container');
var myDrag = new Drag.Move(dragElement , {
// Drag.Move
droppables: dropElements ,
container: dragContainer ,
// Drag.Move
// Drag.Move （ 'el'）
// （ 'dr'）
onDrop: function(el, dr) {
// ：
//
if (!dr) {
//
}
// （ ，
// ）
//
else {
//
};
},
onLeave: function(el, dr) {
//
},
onEnter: function(el, dr) {
//
}
});
いくつかのDragイベントとオプション
Dragには多くの選択肢とイベントがありますが、ここではほんの一部しか見ていません.
snap――オプション
snapオプションを使用すると、ユーザーのマウスが少なくとも何画素移動するかを設定してドラッグを開始できます.デフォルトは6で、額は任意の数値または値が数値の変数に設定できます.明らかに、snapを1000に設定するなど、合理的な制限がありますが、ユーザー体験をカスタマイズする際に役立ちます.
参照コード:[][コードを保存]
var myDrag = new Drag.Move(dragElement , {
//Dragオプション
snap: 10
});
handle――オプション
handleは、ドラッグ要素に制御オブジェクトを追加できます.このコントロールオブジェクトは、[キャプチャ](Drag)を受け入れる唯一の要素となり、他の要素を使用して他のことをすることができます.制御オブジェクトを設定するには、この要素を呼び出すだけです.
参照コード:
//
// ，
var dragHandle = $('drag_handle');
var myDrag = new Drag.Move(dragElement , {
// Drag
handle: dragHandle
});
onStart――イベント
onStartは名前と同じで、ドラッグを開始するとこのイベントをトリガーします.大きなsnapを設定すると、このイベントはマウスが要素から指定されたsnap値ほど離れるまでトリガーされません.
参照コード:
var myDrag = new Drag.Move(dragElement , {
// Drag
// Drag
onStart: function(el) {
//
}
});
onDarg――イベント
このonDragイベントは、要素をドラッグすると連続的にトリガーされます.
参照コード:
var myDrag = new Drag.Move(dragElement , {
// Drag
// Drag
onDrag: function(el) {
//
}
});
onComplete――イベント
最後にonCompleteイベントは、ドラッグ要素を置くとトリガーされ、ドラッグ要素を受け入れる要素の内部に置くかどうかにかかわらずトリガーされます.
参照コード:
var myDrag = new Drag.Move(dragElement , {
// Drag
// Drag
onComplete: function(el) {
//
}
});
コードの例
これらのコードを1つの方法で組み合わせて、異なるイベントがトリガーされると、異なるコンテンツを強調表示し、上に示すオプションを使用してDrag.Moveオブジェクトを構成します.
参照コード:
window.addEvent('domready', function() {
var dragElement = $('drag_me');
var dragContainer = $('drag_cont');
var dragHandle = $('drag_me_handle');
var dropElement = $$('.draggable');
var startEl = $('start');
var completeEl = $('complete');
var dragIndicatorEl = $('drag_ind');
var enterDrop = $('enter');
var leaveDrop = $('leave');
var dropDrop = $('drop_in_droppable');
var myDrag = new Drag.Move(dragElement, {
// Drag.Move
droppables: dropElement,
container: dragContainer,
// Drag
handle: dragHandle,
// Drag.Move
onDrop: function(el, dr) {
if (!dr) { }
else {
dropDrop.highlight('#FB911C'); //
el.highlight('#fff'); //
dr.highlight('#667C4A'); //
};
},
onLeave: function(el, dr) {
leaveDrop.highlight('#FB911C'); //
},
onEnter: function(el, dr) {
enterDrop.highlight('#FB911C'); //
},
// Drag
onStart: function(el) {
startEl.highlight('#FB911C'); //
},
onDrag: function(el) {
dragIndicatorEl.highlight('#FB911C'); //
},
onComplete: function(el) {
completeEl.highlight('#FB911C'); //
}
});
});
注意CSS:IEでは、Drag.Moveのコンテナを適切に登録するために、以下のCSSでその位置を明確に指摘する必要があります.最も重要なのは、コンテナの位置を「position:relative」に設定し、ドラッグ可能な要素の位置を「position:absolute」に設定し、ドラッグ可能な要素のleftとtopプロパティを設定することです.他のブラウザに対して構築し、このルールに従っている場合は、このセクションを無視できます.
参照コード:
/* */
body {
margin: 0
padding: 0
}
/* "position: absolute" */
/* left top */
#drag_me {
width: 100px
height: 100px
background-color: #333
position: absolute
top: 0
left: 0
}
#drop_here {
width: 200px
height: 200px
background-color: #eee
}
/* “position:relative” */
#drag_cont {
background-color: #ccc
height: 600px
width: 500px
position: relative
margin-top: 100px
margin-left: 100px
}
#drag_me_handle {
width: 100%
height: auto
background-color: #666
}
#drag_me_handle span {
display: block
padding: 5px
}
.indicator {
width: 100%
height: auto
background-color: #0066FF
border-bottom: 1px solid #eee
}
.indicator span {
padding: 10px
display: block
}
.draggable {
width: 200px
height: 200px
background-color: blue
}
HTMLを構築します
参照コード:
Droppable
Droppable
Droppable
もっと勉強して・・・
ここでは、ドキュメントに関する章をいくつか説明します.
あなたが最初に必要なものをすべて含むzipパッケージをダウンロードします.
MooTools 1.2コアライブラリ、MooTools 1.2拡張ライブラリ、関数を含む外部JavaScriptファイル、スタイルを定義する外部CSSファイル、簡単なHTMLファイル、上記の例が含まれています.