Mootools-drag-and-drop
提供：Dev Guides
MooTools-ドラッグアンドドロップ
MooToolsは、Webページ要素にドラッグアンドドロップドラッグ機能を追加するのに役立つ素晴らしい機能を提供します。 これを行うには、独自の新しい Drag.Move オブジェクトを作成します。 このオブジェクトを使用して、オプションとイベントを定義できます。 DragおよびDrag.Moveクラスは、MooTools Moreライブラリにあります。
Drag.Moveオブジェクトのオプションとイベントについて説明しましょう。
ドラッグ移動
Drag.Moveは、html要素にドラッグアンドドロップ機能を追加するために使用されるオブジェクトです。 Drag.MoveはDragを拡張するため、Drag.MoveオブジェクトによってDragクラスのすべてのオプションとイベントを使用できます。 次の構文を見て、Drag.Moveオブジェクトの使用方法を理解してください。
構文
var myDrag = new Drag.Move(dragElement, {
//Drag.Move Options
droppables: dropElement,
container: dragContainer,
//Drag Options
handle: dragHandle,
//Drag.Move Events
//the Drag.Move events pass the dragged element,
//and the dropped into droppable element
onDrop: function(el, dr) {
//will alert the id of the dropped into droppable element
alert(dr.get('id'));
},
//Drag Events
//Drag events pass the dragged element
onComplete: function(el) {
alert(el.get('id'));
}
});Drag.Moveオプション
Drag.Moveは、ドラッグアンドドロップ機能でHTML要素を維持するために次のオプションを提供します-
- ドロップ可能-ドロップ可能な要素（ドロップ関連のイベントで登録する要素）のセレクターを設定するのに役立ちます。
- container -これは、ドラッグ要素のコンテナを設定するのに役立ちます（要素を内部に保持します）。
- snap -これは、ドラッグ可能な要素がドラッグを開始する前に、ユーザーがカーソルをドラッグする必要があるピクセル数を設定するのに役立ちます。 デフォルトは6で、数値を表す任意の数の変数に設定できます。
- handle -これは、ドラッグ可能な要素にハンドルを追加するのに役立ちます。 ハンドルは、グラブを受け入れる唯一の要素になります。
ドロップ可能およびコンテナ、スナップ、およびハンドル要素を定義する方法と場所については、次の構文をご覧ください。
構文
//here we define a single element by id
var dragElement = $('drag_element');
//here we define an array of elements by class
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
var dragHandle = $('drag_handle');
//now we set up our Drag.Move object
var myDrag = new Drag.Move(dragElement , {
//Drag.Move Options
//set up our droppables element with the droppables var we defined above
droppables: dropElements ,
//set up our container element with the container element var
container: dragContainer
//set up pixels the user must drag.
Snap: 10
//Adds a handle to your draggable element
handle: dragHandle
});Drag.Moveイベント
Drag.Moveイベントは、アクションのさまざまなレベルで使用できるさまざまな機能を提供します。 たとえば、オブジェクトのドラッグまたはドロップを開始すると、各Drag.Moveイベントは、ドラッグされた要素またはドロップされた要素をパラメーターとして渡します。
以下はサポートされているイベントです-
onStart（）
これにより、ドラッグの開始時にイベントが発生します。 長いスナップを設定すると、このイベントはマウスが離れるまで発生しません。 次の構文を見てください。
構文
var myDrag = new Drag.Move(dragElement , {
//Drag options will pass the dragged element as a parameter
onStart: function(el) {
//put whatever you want to happen on start in here
}
});onDrag（）
これにより、要素をドラッグしている間、イベントが継続的に発生します。 次の構文を見てください。
構文
var myDrag = new Drag.Move(dragElement , {
//Drag options will pass the dragged element as a parameter
onDrag: function(el) {
//put whatever you want to happen on drag in here
}
});onDrop（）
これにより、ドラッグ可能な要素をドロップ可能な要素にドロップするとイベントが発生します。 次の構文を見てください。
構文
var myDrag = new Drag.Move(dragElement , {
//It will pass the draggable element ('el' in this case)
//and the droppable element the draggable is interacting with ('dr' here)
onDrop: function(el, dr) {
//put whatever you want to happen on drop in here
}
});onLeave（）
これにより、ドラッグ可能な要素がドロップ可能な要素の境界を離れるとイベントが発生します。 次の構文を見てください。
構文
var myDrag = new Drag.Move(dragElement , {
//It will pass the draggable element ('el' in this case)
//and the droppable element the draggable is interacting with ('dr' here)
onLeave: function(el, dr) {
//put whatever you want to happen on Leave from droppable area in here
}
});onEnter（）
これは、ドラッグ可能な要素がドロップ可能な要素領域に入ると発生します。 次の構文を見てください。
構文
var myDrag = new Drag.Move(dragElement , {
//It will pass the draggable element ('el' in this case)
//and the droppable element the draggable is interacting with ('dr' here)
onEnter: function(el, dr) {
//this will fire when a draggable enters a droppable element
}
});onComplete（）
これによりイベントが発生します。 onCompleteは、ドロップ可能物をドロップしたときを指し、ドロップ可能物に着地したかどうかを発生させます。 次の構文を見てください。
構文
var myDrag = new Drag.Move(dragElement , {
//Drag Options
//Drag options will pass the dragged element as a parameter
onComplete: function(el) {
//put whatever you want to happen on complete
}
});この章で説明するすべての機能を調べる例を見てみましょう。 機能は、Drag、Drag.Move、onEnter、onLeave、onDrop、onStart、onDrag、およびonCompleteです。 この例では、1つのハンドルを提供しています。これを使用して、ドラッグ可能なオブジェクトをコンテナ内の任意の場所にドラッグできます。 すべてのアクションについて、左側に通知があります（青色で示されています）。 コンテナ内にドロップ可能な領域があります。 ドラッグ可能オブジェクトがドロップ可能領域に入ると、最後の3つのインジケーターがアクティブになります。 次のコードを見てください。
例
<!DOCTYPE html>
<html>
<head>
<style>
/*this is generally a good idea*/
body {
margin: 0;
padding: 0;
}
/*make sure the draggable element has "position: absolute"
and then top and left are set for the start position*/
#drag_me {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
top: 0;
left: 0;
}
#drop_here {
width: 80%;
height: 200px;
background-color: #eee;
margin-left: 100px;
margin-top: -200px !important;
}
/*make sure the drag container is set with position relative*/
#drag_cont {
background-color: #ccc;
height: auto;
width: 500px;
position:relative;
margin-top: 20px;
margin-left: 20px;
margin-bottom: auto;
}
#drag_me_handle {
width: 100%;
height: auto;
background-color: #F5B041;
}
#drag_me_handle span {
display: block;
padding: 20px;
}
.indicator {
width: 100px;
height: auto;
background-color: #0066FF;
border-bottom: 1px solid #eee;
}
.indicator span {
padding: 10px;
display: block;
}
.draggable {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
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 options
droppables: dropElement,
container: dragContainer,
//Drag options
handle: dragHandle,
//Drag.Move Events
onDrop: function(el, dr) {
if (!dr) { }else {
dropDrop.highlight('#FB911C');//flashes orange
el.highlight('#fff');//flashes white
dr.highlight('#667C4A');//flashes green
};
},
onLeave: function(el, dr) {
leaveDrop.highlight('#FB911C');//flashes orange
},
onEnter: function(el, dr) {
enterDrop.highlight('#FB911C');//flashes orange
},
//Drag Events
onStart: function(el) {
startEl.highlight('#FB911C');//flashes orange
},
onDrag: function(el) {
dragIndicatorEl.highlight('#FB911C');//flashes orange
},
onComplete: function(el) {
completeEl.highlight('#FB911C');//flashes orange
}
});
});
</script>
</head>
<body>
<p align = "center">Drag and Drop Application</p>
<div id = "drag_cont">
<div id = "start" class = "indicator"><span>Start</span></div>
<div id = "drag_ind" class = "indicator"><span>Drag</span></div>
<div id = "complete" class = "indicator"><span>Complete</span></div>
<div id = "enter" class = "indicator"><span>Enter Droppable Element</span></div>
<div id = "leave" class = "indicator"><span>Leave Droppable Element</span></div>
<div id = "drop_in_droppable" class = "indicator">
<span>Dropped in Droppable Element</span>
</div>
<div id = "drag_me">
<div id = "drag_me_handle"><span>HANDLE</span></div>
</div>
<div id = "drop_here" class = "draggable">
<p align = "center">Droppable Area</p>
</div>
</div>
</body>
</html>次の出力が表示されます。ここで、ハンドルをクリックしてドラッグする必要があります。 左側に通知の表示があります。
出力
