MooTools - Drag & Drop
MooTools bietet eine hervorragende Funktion, mit der Sie Ihren Webseitenelementen Drag & Drop-Drag-Funktionen hinzufügen können. Wir können dies tun, indem wir unsere eigenen neuen erstellenDrag.MoveObjekt. Mit diesem Objekt können Sie Ihre Optionen und Ereignisse definieren. Drag- und Drag.Move-Klassen stammen aus der MooTools More-Bibliothek.
Lassen Sie uns die Optionen und Ereignisse des Drag.Move-Objekts diskutieren.
Drag.Move
Drag.Move ist ein Objekt, mit dem den HTML-Elementen Drag & Drop-Funktionen hinzugefügt werden. Drag.Move erweitert Drag, sodass wir alle Optionen und Ereignisse der Drag-Klasse für das Drag.Move-Objekt verwenden können. Sehen Sie sich die folgende Syntax an und erfahren Sie, wie Sie das Drag.Move-Objekt verwenden.
Syntax
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-Optionen
Drag.Move bietet die folgenden Optionen zum Verwalten von HTML-Elementen mit Drag & Drop-Funktionen:
droppable - Auf diese Weise können Sie den Selektor für ablegbare Elemente festlegen (die Elemente, die bei Drop-bezogenen Ereignissen registriert werden).
container - Auf diese Weise können Sie den Container des Drag-Elements festlegen (das Element bleibt im Inneren).
snap- Auf diese Weise können Sie festlegen, wie viele Pixel der Benutzer den Cursor ziehen muss, bevor das ziehbare Element mit dem Ziehen beginnt. Der Standardwert ist 6, und Sie können eine beliebige Anzahl von Variablen festlegen, die eine Zahl darstellen.
handle- Auf diese Weise können Sie Ihrem ziehbaren Element ein Handle hinzufügen. Der Griff wird zum einzigen Element, das den Greifer akzeptiert.
In der folgenden Syntax erfahren Sie, wie und wo Sie die Elemente droppable und container, snap und handle definieren.
Syntax
//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-Ereignisse
Drag.Move-Ereignisse bieten verschiedene Funktionen, die in verschiedenen Ebenen der Aktion verwendet werden können. Wenn Sie beispielsweise ein Objekt ziehen oder ablegen, übergibt jedes Drag.Move-Ereignis das gezogene Element oder das abgelegte Element als Parameter.
Im Folgenden sind die unterstützten Ereignisse aufgeführt:
am Start()
Dies löst ein Ereignis beim Start des Ziehens aus. Wenn Sie einen langen Fang einstellen, wird dieses Ereignis erst ausgelöst, wenn sich die Maus in einiger Entfernung befindet. Schauen Sie sich die folgende Syntax an.
Syntax
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 ()
Dies löst ein Ereignis kontinuierlich aus, während Sie ein Element ziehen. Schauen Sie sich die folgende Syntax an.
Syntax
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 ()
Dies löst ein Ereignis aus, wenn Sie das ziehbare Element in ein ablegbares Element ablegen. Schauen Sie sich die folgende Syntax an.
Syntax
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 ()
Dies löst ein Ereignis aus, wenn ein ziehbares Element die Grenzen eines ablegbaren Elements verlässt. Schauen Sie sich die folgende Syntax an.
Syntax
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 ()
Dies wird ausgelöst, wenn ein ziehbares Element in einen Bereich für ablegbare Elemente eintritt. Schauen Sie sich die folgende Syntax an.
Syntax
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 ()
Dies löst ein Ereignis aus. onComplete bezieht sich darauf, wann Sie eine Droppable fallen lassen, und es wird erhöht, ob Sie in einer Droppable landen oder nicht. Schauen Sie sich die folgende Syntax an.
Syntax
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
}
});Nehmen wir ein Beispiel, in dem alle in diesem Kapitel erläuterten Funktionen erläutert werden. Die Funktionen sind: Drag, Drag.Move, onEnter, onLeave, onDrop, onStart, onDrag und onComplete. In diesem Beispiel stellen wir einen GRIFF bereit, mit dem Sie das ziehbare Objekt an eine beliebige Stelle in den Container ziehen können. Für jede Aktion befindet sich auf der linken Seite eine Benachrichtigung (blau markiert). Im Container befindet sich ein Abwurfbereich. Wenn das Draggable-Objekt in den Drop-Bereich gelangt, werden die letzten drei Indikatoren aktiviert. Schauen Sie sich den folgenden Code an.
Example
<!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>Sie erhalten die folgende Ausgabe, in der Sie auf Handle klicken und ziehen müssen. Sie finden jetzt die Benachrichtigungsanzeigen auf der linken Seite.
Output