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 onStart se usa para especificar una función de devolución de llamada que se invocaría cada vez que comience el arrastre del elemento. El elemento que se arrastra 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:
{ onStart: 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 comience el arrastre de un elemento.
Los siguientes ejemplos ilustran el uso de esta opción.
Ejemplo 1:
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 starts to
// be dragged
new Draggable('elem1', {
onStart: (elem) => {
console.log("The element has"
+ " started to being dragged");
console.log(elem);
}
});
};
</script>
</head>
<body>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
</div>
<strong>
script.aculo.us Drag &
Drop onStart Option
</strong>
<p>
The onStart callback would be
invoked whenever the element is
started to be dragged.
</p>
<p>
Drag the image below and
check the console.
</p>
<img id="elem1" src="elem1.png">
</body>
</html>
Producción:
Ejemplo 2:
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 () {
new Draggable('elem1', {
// Define a function to be used
// when the element starts
// to be dragged
onStart: () => {
new Effect.Pulsate('elem1',
);
}
});
};
</script>
</head>
<body>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
</div>
<strong>
script.aculo.us Drag &
Drop onStart Option
</strong>
<p>
The onStart callback would be
invoked whenever the element is
started to be dragged.
</p>
<p>
Drag the image below to notice
the visual effect.
</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