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 zindex se usa para especificar el índice z de CSS del elemento que se está arrastrando. El índice z se utiliza para especificar el orden de los elementos en la página. Un valor más alto significa que el elemento se mostrará por encima de los elementos con un valor más bajo.
Sintaxis:
{ zindex: 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 entero que especifica el índice z del elemento del hastial de arrastre. El valor predeterminado es 1000.
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 z-index set to 100
new Draggable('elem1', { zindex: 100 });
// Draggable element with z-index set to 200
new Draggable('elem2', { zindex: 200 });
};
</script>
</head>
<body>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
</div>
<strong>
script.aculo.us Drag &
Drop zindex Option
</strong>
<p>
Drag the elements to see the effect of
the zindex option. Element 2 has a
higher zindex than Element 1.
</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