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 ordenable se puede usar para hacer que cualquier lista se pueda ordenar, lo que permite al usuario arrastrar cualquier elemento de acuerdo con el orden requerido.
La opción de superposición se utiliza para especificar si el elemento de la lista ordenable reaccionará si se superpone a más de la mitad del otro elemento en la dirección dada. Se puede establecer en ‘falso’, ‘vertical’ u ‘horizontal’. El valor ‘vertical’ debe elegirse para listas verticales, mientras que el valor ‘horizontal’ debe elegirse para listas horizontales.
Sintaxis:
{ overlap:value }
Parámetros: esta opción tiene un valor único como se mencionó anteriormente y se describe a continuación.
- valor: esta es una string que especifica si el elemento en la lista ordenable reaccionará si se superpone en más del 50% del otro elemento en la dirección dada. El valor predeterminado es ‘vertical’.
Ejemplo 1: Los siguientes ejemplos ilustran el uso de esta opción. Tenga cuidado con las rutas de archivo adecuadas para los archivos precompilados durante la implementación.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
<style>
li {
cursor: pointer;
height: 30px;
width: 100px;
border: 1px solid;
padding: 10px;
}
</style>
</head>
<body>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
</div>
<strong>
script.aculo.us Sorting overlap Option
</strong>
<p>This list has overlap set to 'false'.</p>
<ul id="list1">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
<p>This list has overlap set to 'vertical'</p>
<ul id="list2">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
<script type="text/javascript">
window.onload = function () {
Sortable.create("list1", {
// Set the overlap to 'false',
// that is, no overlap
overlap: 'false'
});
Sortable.create("list2", {
// Set the overlap to 'vertical'
overlap: 'vertical'
});
};
</script>
</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>
<style>
span {
cursor: pointer;
border: 1px solid;
padding: 10px;
}
</style>
</head>
<body>
<div>
<h1 style="color: green">
GeeksforGeeks
</h1>
</div>
<strong>
script.aculo.us Sorting overlap Option
</strong>
<p>This list has overlap set to 'false'.</p>
<div id="list1">
<span>Element 1</span>
<span>Element 2</span>
<span>Element 3</span>
<span>Element 4</span>
</div>
<p>This list has overlap set to 'horizontal'</p>
<div id="list2">
<span>Element 1</span>
<span>Element 2</span>
<span>Element 3</span>
<span>Element 4</span>
</div>
<script type="text/javascript">
window.onload = function () {
Sortable.create("list1",
{
elements: $$('#list1 span'),
constraint: 'horizontal',
// Set the overlap to 'false',
// that is, no overlap
overlap: 'false'
});
Sortable.create("list2",
{
elements: $$('#list2 span'),
constraint: 'horizontal',
// Set the overlap to 'horizontal'
overlap: 'horizontal'
});
};
</script>
</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