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 Sortable se puede usar para hacer que cualquier lista se pueda ordenar, lo que permite al usuario arrastrar cualquier elemento según el orden requerido.
La opción onChange se usa para especificar una función de devolución de llamada que se invocaría cada vez que cambie el orden de clasificación durante el arrastre de los elementos en una lista. El elemento cuyo orden se cambia se pasaría como parámetro a la función.
Sintaxis:
{ onChange: 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 cambie el orden de los elementos.
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>
<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 onChange Option
</strong>
<p>
Move the items in the list to
trigger the onChange callback.
</p>
<ul id="list1">
<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", {
// Define the function to be used
// when the list order changes
onChange: (elem) => {
console.log(
"The element that was changed was:",
elem.textContent);
}
});
};
</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