MooTools - Glisser et déposer
MooTools fournit une fonctionnalité formidable qui vous aide à ajouter des fonctionnalités de glisser-déposer à vos éléments de page Web. Nous pouvons le faire en créant notre propre nouveauDrag.Moveobjet. À l'aide de cet objet, vous pouvez définir vos options et événements. Les classes Drag and Drag.Move proviennent de la bibliothèque MooTools More.
Laissez-nous discuter des options et des événements de l'objet Drag.Move.
Faites glisser.
Drag.Move est un objet utilisé pour ajouter une fonction de glisser-déposer aux éléments html. Drag.Move étend Drag, donc nous pouvons utiliser toutes les options et événements de la classe Drag par objet Drag.Move. Jetez un œil à la syntaxe suivante et comprenez comment utiliser l'objet Drag.Move.
Syntaxe
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'));
}
});Options de glisser-déplacer
Drag.Move fournit les options suivantes pour conserver les éléments html avec les fonctionnalités de glisser-déposer -
droppable - Cela vous aide à définir le sélecteur d'éléments droppables (les éléments qui s'enregistrent sur les événements liés aux drop).
container - Cela vous aide à définir le conteneur de l'élément de glissement (garde l'élément à l'intérieur).
snap- Cela vous aide à définir combien de px l'utilisateur doit faire glisser le curseur avant que l'élément déplaçable ne commence à glisser. La valeur par défaut est 6 et vous pouvez la définir sur n'importe quel nombre de variable représentant un nombre.
handle- Cela vous aide à ajouter une poignée à votre élément déplaçable. La poignée devient le seul élément qui acceptera la saisie.
Jetez un œil à la syntaxe suivante pour savoir comment et où définir les éléments droppable et container, snap et handle.
Syntaxe
//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
});Événements Drag.Move
Les événements Drag.Move fournissent différentes fonctions qui peuvent être utilisées à différents niveaux de l'action. Par exemple, lorsque vous commencez à faire glisser ou déposer un objet, chaque événement Drag.Move transmettra l'élément glissé ou l'élément déposé en tant que paramètres.
Voici les événements pris en charge -
onStart ()
Cela déclenche un événement au début de la traînée. Si vous définissez un accrochage long, cet événement ne se déclenchera pas tant que la souris ne sera pas à distance. Jetez un œil à la syntaxe suivante.
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 ()
Cela déclenche un événement en continu pendant que vous faites glisser un élément. Jetez un œil à la syntaxe suivante.
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 ()
Cela déclenche un événement lorsque vous déposez l'élément déplaçable dans un élément déposable. Jetez un œil à la syntaxe suivante.
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
}
});en congé()
Cela déclenche un événement lorsqu'un élément déplaçable quitte les limites d'un élément déposable. Jetez un œil à la syntaxe suivante.
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 ()
Cela se déclenche lorsqu'un élément déplaçable entre dans une zone d'élément déposable. Jetez un œil à la syntaxe suivante.
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 ()
Cela soulève un événement. onComplete fait référence au moment où vous déposez un droppable, et cela augmentera si vous atterrissez ou non dans un droppable. Jetez un œil à la syntaxe suivante.
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
}
});Prenons un exemple qui explorera toutes les fonctionnalités expliquées dans ce chapitre. Les fonctionnalités sont - Glisser, Glisser.Move, onEnter, onLeave, onDrop, onStart, onDrag et onComplete. Dans cet exemple, nous fournissons un HANDLE, à l'aide duquel vous pouvez faire glisser l'objet déplaçable n'importe où dans le conteneur. Pour chaque action, il y a une notification sur le côté gauche (indiquée en bleu). Il y a une zone de dépôt dans le conteneur. Si l'objet Draggable entre dans la zone Droppable, les trois derniers indicateurs sont activés. Jetez un œil au code suivant.
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>Vous recevrez la sortie suivante dans laquelle, vous devez cliquer sur Gérer et faire glisser. Vous pouvez maintenant trouver les indications de notification sur le côté gauche.
Output