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 imagen fantasma se usa para especificar si se crea un clon del elemento y ese clon se mueve en lugar del elemento original hasta que se suelta. Su valor predeterminado es ‘falso’, lo que significa que ningún clon se establecerá como predeterminado.
Sintaxis:
{ ghosting: value }
Parámetros: esta opción tiene un solo valor como se mencionó anteriormente y se describe a continuación:
- valor: este es un valor booleano que especifica si se crearía un clon al arrastrar. El valor predeterminado es ‘falso’.
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 () {
// Draggable element with
// ghosting set to true
new Draggable('elem1',
{ ghosting: true });
// Draggable element with
// ghosting set to false
new Draggable('elem2',
{ ghosting: false });
};
</script>
</head>
<body>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
</div>
<strong>
script.aculo.us Drag &
Drop ghosting Option
</strong>
<p>
Drag the elements to see the
effect of the ghosting option.
Element 1 has the ghosting set
to 'true' and Element 2 has the
ghosting set to 'false'.
</p>
<img id="elem1" src="elem1.png">
<img id="elem2" src="elem2.png">
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA