ホームページ >ウェブフロントエンド >jsチュートリアル >MooTools 1.2 で Drag.Move を使用してドラッグ アンド ドロップ_Mootools を実装する
MooTools 1.2 で Drag.Move を使用してドラッグ アンド ドロップ_Mootools を実装する
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-05-16 18:46:41898ブラウズ
その使用法は、これまでに説明した他のプラグインと似ています。まず、「new」キーワードを使用して Drag.Move オブジェクトを作成し、それを変数に割り当てます。次に、オプションとイベントを定義します。作業はこれだけですが、以下の例で説明されている IE の CSS の癖に注意する必要があります。
基本的な使用法
Drag.Move
独自のドラッグ オブジェクトを作成するのは非常に簡単です。以下の例を見てください。 Drag.Move オブジェクトのオプションとイベントを Drag のオプションとイベントからどのように分離したかに注目してください。 Drag.Move クラスは Drag クラスを拡張し、Drag クラスのオプションとイベントを受け入れることができるようにします。今日は Drag クラスについて具体的に説明するつもりはありませんが、それでもいくつかの便利なオプションとイベントについて見ていきたいと思います。以下のコードを見て詳細を学んでください。
参照コード:
コードをコピー コードは次のとおりです:
var myDrag = new Drag.Move(dragElement, {
// Drag.Move
droppables のオプション:dropElement,
container:ragContainer,
// Drag
handle のオプション:dragHandle,
// Drag .Move イベント
// Drag.Move イベントはドラッグされた要素を渡します
// ドラッグされた要素を受け入れることができる要素もあります (ドロップ可能)
onDrop: function(el, dr ) {
// 許容可能な要素にドラッグされた要素の ID を表示します
alert(dr.get('id'))
},
// イベントをドラッグします
//イベント配信をドラッグ 要素
onComplete: function(el) {
alert(el.get('id'))
}
});ちょっと中断しましょう...
Drag.Move オプション
droppables - ドロップ可能な要素のセレクターを設定します (この要素はドラッグ関連のイベントが登録されます) )
コンテナ - ドラッグされた要素のコンテナを設定します (要素が常にコンテナ内に存在するようにするため)
このオプションの設定は非常に簡単です:
参照コード:
コードをコピー コードは次のとおりです: // ここで要素を id で定義します
varragElement = $(' rag_element'); // ここでは、クラス
vardropElements = $$('.drag_element');
varragContainer = $('drag_container'); によって要素のセットを定義します。 / ここで Drag.Move オブジェクトを作成します
var myDrag = new Drag.Move(dragElement , {
// Drag.Move オプション
// 上で定義したドロップ可能をドロップ可能に割り当てます
droppables:dropElements ,
// コンテナ要素の変数をコンテナに割り当てます。
container:ragContainer
});
これで、要素はドラッグ可能な要素を受け入れることができます。要素のドラッグ アンド ドロップを受け入れます。
Drag.Move イベント
このイベントを使用すると、オブジェクトのドラッグを開始したときやドロップする準備ができたときなど、さまざまな時点で関数をトリガーできます。各 Drag.Move イベントは、ドラッグ要素と、ドラッグ要素 (常にドロップ可能と呼びます) を受け入れる要素をパラメータとして渡します。
onDrop - このイベントは、ドラッグ可能な要素を受け入れる要素内にドラッグ可能な要素がドロップされると発生します。 vardropElements = $$('.drag_element');
varragContainer = $('drag_container'); によって要素のセットを定義します。 / ここで Drag.Move オブジェクトを作成します
var myDrag = new Drag.Move(dragElement , {
// Drag.Move オプション
// 上で定義したドロップ可能をドロップ可能に割り当てます
droppables:dropElements ,
// コンテナ要素の変数をコンテナに割り当てます。
container:ragContainer
});
これで、要素はドラッグ可能な要素を受け入れることができます。要素のドラッグ アンド ドロップを受け入れます。
Drag.Move イベント
このイベントを使用すると、オブジェクトのドラッグを開始したときやドロップする準備ができたときなど、さまざまな時点で関数をトリガーできます。各 Drag.Move イベントは、ドラッグ要素と、ドラッグ要素 (常にドロップ可能と呼びます) を受け入れる要素をパラメータとして渡します。
onLeave - このイベントは、ドラッグ可能な要素が、ドラッグ可能な要素を受け入れる要素から離れるときに発生します。
onEnter - このイベントは、ドラッグ可能な要素を受け入れる要素にドラッグ可能な要素が入ったときに発生します。
これらの各イベントは関数を呼び出し、対応するイベントが発生すると各関数が呼び出されます。
参照コード:
コードをコピー
コードは次のとおりです: varragContainer = $('rag_container'); var myDrag = new Drag.Move(dragElement , {
// Drag.Move オプションdroppables:dropElements ,
container:ragContainer ,
// ドラッグ.Move イベント
// Drag.Move 関数には、ドラッグ可能な要素 (この例では 'el') が渡されます
// そして、ドラッグ可能な要素 (この例では 'dr') を受け入れる要素
onDrop: function(el, dr) {
// 次の文はおそらく次のことを意味します:
// ドラッグした要素が、ドラッグした要素を受け入れることができる要素の範囲内にない場合
if ( ! dr) {
// 何もしません
}
// それ以外の場合 (論理的に言えば、
// ドラッグしている要素がスコープ内の要素のドラッグを受け入れる要素に到達した場合)
/ / このイベントを実行します
else {
// ここで何かを実行します
},
onLeave: function(el, dr) {
// このイベントは次の場合にトリガーされます。ドラッグされた要素がドラッグ オブジェクトを受け入れる要素を離れる
},
onEnter: function(el, dr) {
// このイベントは、ドラッグされた要素がドラッグを受け入れる要素を離れるときにトリガーされます。オブジェクト。移動要素がオブジェクトのドラッグを受け入れる要素に入るとトリガーされます。
}
});
いくつかのドラッグ イベントとオプション
ドラッグには多くのオプションとイベントがありますが、ここではごく一部のみを取り上げます。
スナップ - オプション
スナップ オプションを使用すると、ドラッグを開始する前にユーザーのマウスが移動する最小ピクセル数を設定できます。デフォルトは 6 ですが、任意の数値または値が数値である変数に設定できます。明らかに、ここには合理的な制限がいくつかあります (たとえば、スナップを 1000 に設定しても役に立ちません) が、これはユーザー エクスペリエンスをカスタマイズするときに役立ちます。
参照コード: [コードをコピー] [コードを保存]
var myDrag = new Drag.Move(dragElement, {
// ドラッグ オプション
snap: 10
}); handle - オプション
handle は、ドラッグ要素にコントロール オブジェクトを追加します。このコントロール オブジェクトは、「掴む」(ドラッグする) ことができる唯一の要素となり、他の要素を使って他のことを行うことができるようになります。コントロール オブジェクトを設定するには、この要素を呼び出すだけです。
参照コード:
参照コード:
参照コード:
参照コード:
参照コード:
container:ragContainer ,
// ドラッグ.Move イベント
// Drag.Move 関数には、ドラッグ可能な要素 (この例では 'el') が渡されます
// そして、ドラッグ可能な要素 (この例では 'dr') を受け入れる要素
onDrop: function(el, dr) {
// 次の文はおそらく次のことを意味します:
// ドラッグした要素が、ドラッグした要素を受け入れることができる要素の範囲内にない場合
if ( ! dr) {
// 何もしません
}
// それ以外の場合 (論理的に言えば、
// ドラッグしている要素がスコープ内の要素のドラッグを受け入れる要素に到達した場合)
/ / このイベントを実行します
else {
// ここで何かを実行します
},
onLeave: function(el, dr) {
// このイベントは次の場合にトリガーされます。ドラッグされた要素がドラッグ オブジェクトを受け入れる要素を離れる
},
onEnter: function(el, dr) {
// このイベントは、ドラッグされた要素がドラッグを受け入れる要素を離れるときにトリガーされます。オブジェクト。移動要素がオブジェクトのドラッグを受け入れる要素に入るとトリガーされます。
}
});
いくつかのドラッグ イベントとオプション
ドラッグには多くのオプションとイベントがありますが、ここではごく一部のみを取り上げます。
スナップ - オプション
スナップ オプションを使用すると、ドラッグを開始する前にユーザーのマウスが移動する最小ピクセル数を設定できます。デフォルトは 6 ですが、任意の数値または値が数値である変数に設定できます。明らかに、ここには合理的な制限がいくつかあります (たとえば、スナップを 1000 に設定しても役に立ちません) が、これはユーザー エクスペリエンスをカスタマイズするときに役立ちます。
参照コード: [コードをコピー] [コードを保存]
var myDrag = new Drag.Move(dragElement, {
// ドラッグ オプション
snap: 10
}); handle - オプション
handle は、ドラッグ要素にコントロール オブジェクトを追加します。このコントロール オブジェクトは、「掴む」(ドラッグする) ことができる唯一の要素となり、他の要素を使って他のことを行うことができるようになります。コントロール オブジェクトを設定するには、この要素を呼び出すだけです。
参照コード:
コードをコピー コードは次のとおりです:
// ここでクラスセレクターは配列を作成します
// これにより、要素のドラッグを受け入れることができる複数の要素を持つことにした場合、複数のコントロール オブジェクトを簡単に追加できるようになります
varragHandle = $('drag_handle '); >var myDrag = new Drag.Move(dragElement, {
// ドラッグ オプション
ハンドル:ragHandle
});
onStart—Event
onStart は単なる名前のように、このイベントはドラッグの開始時にトリガーされます。大きなスナップを設定した場合、このイベントは、マウスが要素から指定されたスナップ値よりも離れるまで発生しません。 // これにより、要素のドラッグを受け入れることができる複数の要素を持つことにした場合、複数のコントロール オブジェクトを簡単に追加できるようになります
varragHandle = $('drag_handle '); >var myDrag = new Drag.Move(dragElement, {
// ドラッグ オプション
ハンドル:ragHandle
});
onStart—Event
参照コード:
コードをコピー コードは次のとおりです:
var myDrag = new Drag.Move(dragElement, { // ドラッグ オプション
// ドラッグ オプションは、ドラッグされた要素をパラメータとして渡します
onStart: function(el) {
// 開始時にここに配置しますドラッグ やりたいことすべて
}
});
onDarg - イベント
この onDrag イベントは、要素をドラッグすると継続的にトリガーされます。 // ドラッグ オプションは、ドラッグされた要素をパラメータとして渡します
onStart: function(el) {
// 開始時にここに配置しますドラッグ やりたいことすべて
}
});
onDarg - イベント
参照コード:
コードをコピー コードは次のとおりです:
var myDrag = new Drag. Move(dragElement , { //ドラッグ オプション
//ドラッグ オプションは、ドラッグされた要素をパラメータとして渡します
onDrag: function(el) {
//ドラッグを開始します。やりたいことは何でもできます。
}
});
onComplete - イベント
最後に、ドラッグした要素をドロップしたときに発生する onComplete イベントがあります。ドラッグ可能な要素を受け入れる要素内に配置します。 //ドラッグ オプションは、ドラッグされた要素をパラメータとして渡します
onDrag: function(el) {
//ドラッグを開始します。やりたいことは何でもできます。
}
});
onComplete - イベント
参照コード:
コードをコピー コードは次のとおりです:
var myDrag = new Drag.Move(dragElement, { // ドラッグ オプション
// ドラッグ オプションは、ドラッグされた要素をパラメータとして渡します
onComplete: function(el) {
//ドラッグを開始します。やりたいことは何でもできます。
}
});
コード例
さまざまなイベントがトリガーされたときにさまざまなコンテンツを強調表示するように、今のコードを組み合わせてみましょう。そして、上で見たオプションを使用して Drag.Move オブジェクトを構成します。 // ドラッグ オプションは、ドラッグされた要素をパラメータとして渡します
onComplete: function(el) {
//ドラッグを開始します。やりたいことは何でもできます。
}
});
コード例
参照コード:
コードをコピー コードは次のとおりです:
window.addEvent('domready', function() {
varragElement = $('drag_me');
varragContainer = $('drag_cont');
varragHandle = $('drag_me_handle');
vardropElement = $$('.draggable');
var completeEl = $('complete'); >varragIndicatorEl = $('drag_ind');
var enterDrop = $('enter');
var beginDrop = $('drop_in_droppable');
var myDrag = new Drag.Move(dragElement, {
// Drag.Move选项
droppables:dropElement,
container:ragContainer,
// Drag选项
ハンドル: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'); //橙色闪烁
},
// イベント
onStart: function(el) {
startEl.highlight('#FB911C');
},
onDrag: function(el) {
dragIndicatorEl.highlight('#FB911C'); //橙色闪烁
},
onComplete: function(el) {
completeEl.highlight('#FB911C'); //オレンジ色闪烁
}
});
});
次の CSS に注意してください: IE では、Drag.Move のコンテナを適切に指定できるように、以下の CSS でその位置を明確に指定する必要があります。コンテナの配置位置は「位置:相対」、可動要素の配置位置は「位置:絶対」であり、他のデバイスにある場合は、可動要素のleftとtopプロパティが必ず設定されます。器構築および準拠此规则，你可略这一部分：
参照代：
复制代
复制代
window.addEvent('domready', function() {
varragElement = $('drag_me');
varragContainer = $('drag_cont');
varragHandle = $('drag_me_handle');
vardropElement = $$('.draggable');
var completeEl = $('complete'); >varragIndicatorEl = $('drag_ind');
var enterDrop = $('enter');
var beginDrop = $('drop_in_droppable');
var myDrag = new Drag.Move(dragElement, {
// Drag.Move选项
droppables:dropElement,
container:ragContainer,
// Drag选项
ハンドル: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'); //橙色闪烁
},
// イベント
onStart: function(el) {
startEl.highlight('#FB911C');
},
onDrag: function(el) {
dragIndicatorEl.highlight('#FB911C'); //橙色闪烁
},
onComplete: function(el) {
completeEl.highlight('#FB911C'); //オレンジ色闪烁
}
});
});
次の CSS に注意してください: IE では、Drag.Move のコンテナを適切に指定できるように、以下の CSS でその位置を明確に指定する必要があります。コンテナの配置位置は「位置:相対」、可動要素の配置位置は「位置:絶対」であり、他のデバイスにある場合は、可動要素のleftとtopプロパティが必ず設定されます。器構築および準拠此规则，你可略这一部分：
参照代：
复制代
代码如下： /* 以下は通常不错的主意 */ body { margin: 0
padding: 0 }
/* 保護可能元素有"position:Absolute" */
/* 并设設置開始時のleftおよびtopプロパティ */
#drag_me {
width: 100px
height: 100px
background-color: #333
位置: 絶対
上: 0
左: 0
}
#drop_here {
幅: 200px
高さ: 200px
背景色: # eee
}
/* 保護拖動的な容器有“position:relative” */
#drag_cont {
background-color: #ccc
height: 600px
width: 500px
位置: 相対
margin-top: 100px
margin-left: 100px
}
#drag_me_handle {
width: 100%
height: auto
background- color: #666
}
#drag_me_handle スパン {
表示: ブロック
パディング: 5px
}
.indicator {
幅: 100%
高さ: 自動
background-color: #0066FF
border-bottom: 1px ソリッド #eee
}
.indicator scan {
padding: 10px
display: block
}
.draggable {
width: 200px
height: 200px
background-color: blue
}
现在我们復元立我们的HTML：
参考代码：
/* 保護可能元素有"position:Absolute" */
/* 并设設置開始時のleftおよびtopプロパティ */
#drag_me {
width: 100px
height: 100px
background-color: #333
位置: 絶対
上: 0
左: 0
}
#drop_here {
幅: 200px
高さ: 200px
背景色: # eee
}
/* 保護拖動的な容器有“position:relative” */
#drag_cont {
background-color: #ccc
height: 600px
width: 500px
位置: 相対
margin-top: 100px
margin-left: 100px
}
#drag_me_handle {
width: 100%
height: auto
background- color: #666
}
#drag_me_handle スパン {
表示: ブロック
パディング: 5px
}
.indicator {
幅: 100%
高さ: 自動
background-color: #0066FF
border-bottom: 1px ソリッド #eee
}
.indicator scan {
padding: 10px
display: block
}
.draggable {
width: 200px
height: 200px
background-color: blue
}
现在我们復元立我们的HTML：
参考代码：
复制代
代码如下:
拖動作開始
拖アニメ中
拖アニメーション结束
Droppable 元素を入力済み
离开了DroppableElements
放进了Droppable元素
制御对象
Learn more…
Here are some relevant sections from the document:
Download a zip package with everything you need to get started
Contains the MooTools 1.2 core library, the MooTools 1.2 extension library, an external JavaScript file containing your functions, an external CSS file defining your styles, a simple HTML file and the example above.
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。