Esta opción de reversión de arrastrar y soltar de script.aculo.us se utiliza para volver a su posición original cuando finaliza el arrastre. También especifica si se invocará la devolución de llamada de efecto de reversión cuando se detenga la operación de arrastre.
Sintaxis:
new Draggable('element', {revert:true});
Valores:
- revertir: este valor contiene dos valores, verdadero y falso, por defecto es falso.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"scriptaculous-js-1.9.0/lib/prototype.js">
</script>
<script type="text/javascript" src=
"scriptaculous-js-1.9.0/src/scriptaculous.js">
</script>
<script type="text/javascript">
window.onload = function () {
$A($('draggables').getElementsByTagName('img'))
.each(function (item) {
new Draggable(item, {
revert: true,
ghosting: true
});
});
Droppables.add('droparea', {
hoverclass: 'hoverActive',
onDrop: moveItem
});
// Set drop area default non cleared.
$('droparea').cleared = false;
}
function moveItem(draggable, droparea) {
if (!droparea.cleared) {
droparea.innerHTML = '';
droparea.cleared = true;
}
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
</script>
<style type="text/css">
#draggables {
width: 550px;
height: 73px;
}
#gfg {
width: 550px;
height: 73px;
}
</style>
</head>
<body>
<div id="draggables">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png">
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA