Esta opción de efecto final de arrastrar y soltar de script.aculo.us se utiliza para definir la función que se llama cuando un elemento de arrastre adecuado deja de arrastrarse. La función se puede utilizar para definir cualquier efecto.
Sintaxis:
{ endeffect: effectFunction }
Valores:
- effectFunction: este valor define la función que contiene el efecto que se mostrará cuando el gablete de arrastre deje de arrastrarse.
El siguiente ejemplo ilustra la opción de efecto final de arrastrar y soltar :
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
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,
// Define the effect to be used when
// the draggable is stopped dragging
endeffect: function (element) {
new Effect.Opacity(element, {
from: 0,
to: 1.0,
duration: 5
})
}
});
});
Droppables.add('droparea',
{ 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;
}
#droparea {
float: left;
width: 550px;
height: 73px;
border: 2px solid gray;
text-align: center;
font-size: 16px;
padding: 12px;
}
</style>
</head>
<body>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
<p>A Computer Science Portal for Geeks</p>
</div>
<strong>
script.aculo.us Drag & Drop
endeffect Option
</strong>
<div id="draggables">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png">
</div>
<br>
<br>
<div id="droparea">
Drag the Image and Drop Your Image
in this area
</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