El módulo DragDrop se puede usar para hacer que cualquier elemento se pueda arrastrar o luego se puede colocar en una zona de colocación.
Hacer un elemento arrastrable: los elementos arrastrables se pueden crear creando una instancia arrastrable y luego identificando el elemento que se hará arrastrable
Sintaxis:
new Draggable( element_id, {options} );
Opciones arrastrables:
|
Opciones |
Descripción |
| Se utiliza para especificar si un elemento debe volver a su posición original después de haber sido arrastrado. | |
| Se utiliza para hacer que un elemento arrastrable restrinja sus movimientos. | |
| Solía especificar el índice z en la hoja de estilo CSS. | |
| Se utiliza para especificar si el elemento debe clonarse en el área de colocación o moverse a ella. | |
| Se utiliza para especificar las direcciones arrastrables. | |
| Se utiliza para especificar el controlador para activar el arrastre. | |
| Se utiliza para definir la función que se llama cuando el elemento especificado comienza a arrastrarse. | |
| se utiliza para definir la función que se llama cuando el elemento especificado revierte el arrastre. | |
| Se utiliza para definir la función que se llama cuando el elemento especificado deja de arrastrarse. |
Opciones de devolución de llamada:
|
Opciones |
Descripción |
| Similar a onDrag activado cuando cambia la posición del elemento. | |
| Se activa cuando se inicia un arrastre. | |
| Se activa cuando finaliza un arrastre. | |
| Se activa continuamente mientras se arrastra el elemento y cambia la ubicación del mouse. |
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<script>
var elements = ['element'];
window.onload = function () {
elements.each(function (item)
{ new Draggable(item); });
}
</script>
</head>
<body>
<img id="element" src="gfg.png" />
</body>
</html>
Producción:
Creación del área de colocación: ahora crearemos instancias que se pueden colocar para colocar el elemento en la zona de colocación.
Sintaxis:
Droppables.add( element_id, {options} );
Opciones desplegables:
|
Opciones |
Descripción |
| Se utiliza para crear una clase flotante activa en el área de colocación. | |
| Solía especificar la identificación del elemento que se puede arrastrar para que no se pueda colocar otro elemento en él. | |
| Cuando es verdadero, solo permite que los elementos que tienen una o más propiedades CSS se suelten sobre él. | |
|
Superposición |
Cuando se da una dirección (horizontal/vertical), permitirá que el usuario suelte solo el elemento. Si se desborda más del 50% en la dirección indicada. |
| Permite la superposición de elementos arrastrables dentro de un área de colocación, el elemento arrastrable debajo de otro elemento no será visible. |
Opciones de devolución de llamada:
| Opciones |
Descripción |
| Se activa cuando un elemento se desplaza sobre el área de colocación. | |
| Se activa cuando se suelta un elemento en el área de colocación. |
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<script>
window.onload = function () {
$A($('draggable').getElementsByTagName(
'img')).each(function (item) {
new Draggable(item, {
revert: true, ghosting: true
});
});
Droppables.add('dropArea',
{ hoverclass: 'hoverActive',
onDrop: dropAppend }
);
}
function dropAppend(draggable, dropArea) {
draggable.parentNode.removeChild(draggable);
dropArea.appendChild(draggable);
}
</script>
<style>
#dropArea {
float: left;
height: 125px;
width: 435px;
border: 3px ridge green;
padding: 10px;
float: left;
}
.hoverActive {
background-color: #7cfa5c;
}
#draggable img,
#dropArea img {
border: 1px solid green;
}
</style>
</head>
<body>
<div id="dropArea">
</div>
<div id="draggable">
<img src="gfg.png" />
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por swapnil074 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA