La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. El módulo Arrastrar y soltar se puede usar para hacer que cualquier elemento se pueda arrastrar y también permite que se suelten en una zona de colocación.
La opción de cambio se llama igual que la opción onDrag, es decir, se utiliza para especificar una función de devolución de llamada que se invocaría cada vez que se arrastre el elemento. Pero la opción onDrag es la más preferida en comparación con la opción de cambio.
Sintaxis:
new Draggable('element', {change: 'function'});
Parámetros: esta opción tiene un solo valor como se mencionó anteriormente y se describe a continuación:
- función: esta es una función de devolución de llamada que se invocaría cada vez que se arrastra el elemento.
El siguiente ejemplo ilustra el uso de esta opción.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="javascript/prototype.js">
</script>
<script type="text/javascript"
src="javascript/scriptaculous.js">
</script>
<script type="text/javascript">
window.onload = function () {
// Define a function to be used
// when the element is being dragged
new Draggable('elem1', {
change: (elem) => {
console.log("The element is "
+ "currently being dragged");
// The element that is being dragged
// can be accessed using the parameter
// in the callback function
},
onEnd: () => {
console.log("The dragging of "
+ "the element has stopped");
}
});
};
</script>
</head>
<body>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
</div>
<strong>
script.aculo.us Drag &
Drop change Option
</strong>
<p>
The change callback would be invoked
whenever the element is being currently
dragged.
</p>
<p>
Drag the image below and check
the console.
</p>
<img id="elem1" src="gfg.png">
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por parasmadan15 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA