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 onDrag se usa para especificar una función de devolución de llamada que se invocaría cada vez que se arrastre el elemento. El elemento que se está arrastrando se pasaría como parámetro a la función.
Incluir guiones:
Paso 1: Antes de comenzar, deberá descargar los archivos de script que se incluyen en la etiqueta <head> de nuestra página HTML. Puede descargarlo desde http://script.aculo.us/downloads
Paso 2: Descomprima los archivos y coloque los archivos requeridos (principalmente prototipo.js y scriptaculous.js ) en el directorio raíz actual de su carpeta.
Paso 3: coloque cualquier imagen de su elección en el directorio raíz actual de su carpeta, como en el siguiente ejemplo , se usa elem1.png.
Sintaxis:
{ onEnd: 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="prototype.js">
</script>
<script type="text/javascript"
src="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', {
onDrag: (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 onDrag Option
</strong>
<p>
The onDrag 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="elem1.png">
</body>
</html>
Producción:
Referencia: http://script.aculo.us/
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA