MooTools - Arrastrar y soltar
MooTools proporciona una característica tremenda que le ayuda a agregar funciones de arrastrar y soltar a los elementos de su página web. Podemos hacer esto creando nuestro propio nuevoDrag.Moveobjeto. Con este objeto, puede definir sus opciones y eventos. Las clases Drag and Drag.Move son de la biblioteca MooTools More.
Analicemos las opciones y eventos del objeto Drag.Move.
Arrastrar Mover
Drag.Move es un objeto que se utiliza para agregar la función de arrastrar y soltar a los elementos html. Drag.Move extiende Drag, por lo que podemos usar todas las Opciones y Eventos de la clase Drag mediante el objeto Drag.Move. Eche un vistazo a la siguiente sintaxis y comprenda cómo utilizar el objeto Drag.Move.
Sintaxis
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'));
}
});Opciones de Drag.Move
Drag.Move proporciona las siguientes opciones para mantener elementos html con funciones de arrastrar y soltar:
droppable - Esto le ayuda a configurar el selector de elementos soltables (los elementos que se registran en eventos relacionados con soltar).
container - Esto le ayuda a configurar el contenedor del elemento de arrastre (mantiene el elemento dentro).
snap- Esto le ayuda a establecer cuántos px debe arrastrar el cursor el usuario antes de que el elemento arrastrable comience a arrastrarse. El valor predeterminado es 6 y puede establecerlo en cualquier número de variable que represente un número.
handle- Esto le ayuda a agregar un identificador a su elemento arrastrable. El mango se convierte en el único elemento que aceptará el agarre.
Eche un vistazo a la siguiente sintaxis para saber cómo y dónde definir los elementos droppable y container, snap y handle.
Sintaxis
//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
});Eventos Drag.Move
Los eventos Drag.Move proporcionan diferentes funciones que se pueden usar en diferentes niveles de la acción. Por ejemplo, cuando comienza a arrastrar o soltar un objeto, cada evento Drag.Move pasará el elemento arrastrado o el elemento soltado como parámetros.
Los siguientes son los eventos admitidos:
onStart ()
Esto genera un evento al inicio del arrastre. Si establece un chasquido largo, este evento no se generará hasta que el mouse esté a distancia. Eche un vistazo a la siguiente sintaxis.
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 ()
Esto genera un evento continuamente mientras arrastra un elemento. Eche un vistazo a la siguiente sintaxis.
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 ()
Esto genera un evento cuando sueltas el elemento que se puede arrastrar en un elemento que se puede soltar. Eche un vistazo a la siguiente sintaxis.
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
}
});De vacaciones()
Esto genera un evento cuando un elemento que se puede arrastrar deja los límites de un elemento que se puede soltar. Eche un vistazo a la siguiente sintaxis.
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 ()
Esto surge cuando un elemento que se puede arrastrar entra en un área de elementos que se pueden soltar. Eche un vistazo a la siguiente sintaxis.
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 ()
Esto genera un evento. onComplete se refiere a cuando sueltas un droppable, y aumentará si aterrizas o no en un droppable. Eche un vistazo a la siguiente sintaxis.
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
}
});Tomemos un ejemplo que explorará todas las funciones explicadas en este capítulo. Las funciones son: Drag, Drag.Move, onEnter, onLeave, onDrop, onStart, onDrag y onComplete. En este ejemplo, proporcionamos un HANDLE, con el que puede arrastrar el objeto arrastrable a cualquier lugar del contenedor. Para cada acción, hay una notificación en el lado izquierdo (indicado en color azul). Hay un área Droppable en el contenedor. Si el objeto Arrastrable entra en el área Droppable, entonces se activan los últimos tres indicadores. Eche un vistazo al siguiente código.
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>Recibirá el siguiente resultado en el que debe hacer clic en Controlar y arrastrar. Ahora puede encontrar las indicaciones de notificación en el lado izquierdo.
Output