El usuario debe tener la capacidad de reordenar los elementos (como los elementos de una lista) arrastrándolos y soltándolos. Sin arrastrar y soltar, no es una tarea común reordenar, pero script.aculo.us proporciona soporte extendido de reordenación listo para usar a través de la clase Sortable .
Cuando la opción de árbol se establece en » verdadero» , permite ordenar con subelementos dentro del elemento ordenable. El valor por defecto es “ falso ”. El elemento para hacerlo clasificable se pasa al método create() en el espacio de nombres clasificable .
Un ordenable consta de elementos de elementos en un elemento contenedor. Cuando creas un nuevo Sortable , se encarga de la creación de los elementos arrastrables y desplegables correspondientes.
Para usar las capacidades clasificables de script.aculo.us , deberá cargar el módulo de arrastrar y soltar, que también requiere el módulo de efectos. Los archivos precompilados necesarios para la implementación del código son los siguientes.
<script type=”text/javascript” src=”scriptaculous-js-1.9.0/lib/prototype.js”></script>
<script type=”text/javascript” src=”scriptaculous-js-1.9.0 /src/scriptaculous.js?load = efectos, arrastrar y soltar”>
Sintaxis: El método create() se utiliza para crear un elemento ordenable. El método create() toma la identificación del elemento contenedor y los ordena según las opciones que se pasan.
Sortable.create('id-of-container', [options]);
El método Sortable.destroy() se utiliza para eliminar todos los controladores de eventos y las referencias creadas por el método Sortable.create() .
Una llamada a Sortable.create llama implícitamente a Sortable.destroy si el elemento al que se hace referencia ya era Sortable.
Sintaxis:
Sortable.destroy( element );
Ejemplo 1: A continuación se muestra la función de arrastrar y soltar para una lista. El siguiente ejemplo demostrará cómo arrastrar y soltar para un árbol que se desarrolla sobre un elemento de lista simple.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="prototype.js">
</script>
<script type="text/javascript" src=
"scriptaculous.js?load = effects,dragdrop">
</script>
<script type="text/javascript ">
window.onload = function() {
Sortable.create('namelist', {
tag: 'li'
});
}
</script>
<style type="text/css ">
li {
cursor: move;
}
</style>
</head>
<body>
<p>
Drag and drop the elements
that are to be sorted
</p>
<ul id="namelist ">
<li>Spanish</li>
<li>French</li>
<li>English</li>
<li>Russian</li>
<li>Arab</li>
<li>Chinese</li>
<li>Portugese</li>
<li>Turkish</li>
</ul>
</body>
</html>
Producción:
Antes de ejecutar:
Después de ejecutar:
Ejemplo 2: El siguiente ejemplo demuestra cómo arrastrar y soltar para una estructura de árbol creada a partir de elementos de lista.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript" src=
"scriptaculous.js?load = effects,dragdrop" ">
</script>
<script type="text/javascript ">
window.onload = function() {
Sortable.create('namelist', {
tree: true,
scroll: window,
treeTag: 'ul',
tag: 'li'
});
}
</script>
<style type = "text/css ">
li { cursor: move; }
</style>
</head>
<body>
<p>
Drag and drop the elements
that are to be sorted
</p>
<ul id="namelist ">
<li>Web Technologies
<ul>
<li>PHP</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Computer Science
<ul>
<li>Data structures</li>
<li>Theory of CS</li>
<li>Algorithms</li>
</ul>
</li>
<li>English
<ul>
<li>Grammar</li>
<li>Literature</li>
</ul>
</li>
<li>Maths</li>
<li>Social studies</li>
</ul>
</body>
</html>
Producción:
Antes de ejecutar:
Después de ejecutar:
Publicación traducida automáticamente
Artículo escrito por kodalirajini2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA