Sortable proporciona al usuario la capacidad de crear muchos elementos arrastrables dentro del contenedor. Cuando creas un Sortable, crea automáticamente el Draggable y Droppable correspondiente para el contenedor.
Sintaxis:
Sortable.create('container_id', {options});
Opciones clasificables:
| etiqueta | Especifica el tipo de los elementos dentro del contenedor que se van a hacer ordenables. El valor predeterminado es ‘li’. |
| solamente | El único proporciona un nombre de clase CSS, o una array de nombres de clase, que un elemento que se puede arrastrar debe poseer para ser aceptado por el elemento desplegable. |
| superposición | superposición tiene falso, horizontal y vertical como sus valores. Controla el punto en el que se desenstring una reordenación. El valor predeterminado es vertical |
| restricción | Tiene falso, horizontal y vertical como valores. Restringe el movimiento de elementos clasificables arrastrados. Predeterminado a vertical. |
| contención | Permite arrastrar y soltar entre clasificables. Toma una array de elementos o ID de elemento. |
| resolver | handle especifica un elemento que se utilizará para iniciar operaciones de arrastre. Por defecto, cada elemento es su propio identificador. |
| clase flotante | hoverclass proporciona un nombre de clase CSS que se activa en elementos ordenables no arrastrados cuando un elemento arrastrado pasa sobre ellos. |
| imagen fantasma | el efecto fantasma permite al usuario hacer una copia semitransparente del elemento que se puede mover junto con el puntero del mouse. El valor predeterminado es falso. |
| dropOnEmpty | dropOnEmpty permite colocar elementos ordenables en una lista vacía. El valor predeterminado es falso. |
| Desplazarse | Si el contenedor clasificable tiene una barra de desplazamiento, esta opción permite el desplazamiento automático de la lista. |
| desplazamientoSensibilidad | Si el desplazamiento está habilitado, ajusta el punto en el que se activa el desplazamiento. El valor predeterminado es 20. |
| Velocidad de desplazamiento | Si el desplazamiento está habilitado, ajusta la velocidad de desplazamiento. El valor predeterminado es 15. |
| árbol | El árbol permite clasificar con subelementos dentro del elemento clasificable. El valor predeterminado es falso. |
| árbolEtiqueta | Cuando la opción de árbol está habilitada, especifica el tipo de elemento contenedor del subelemento cuyos elementos secundarios se pueden ordenar |
Ejemplo:
javascript
<html>
<head>
<title></title>
<script type = "text/javascript"
src = "./javascript/prototype.js"></script>
<script type = "text/javascript"
src = "./javascript/scriptaculous.js"></script>
<script>
window.onload = function() {
Sortable.create('list', {tag:'li'});
}
</script>
<style>
li { cursor: move; }
</style>
</head>
<body>
<ul id = "list">
<li>tag</li>
<li>overlap</li>
<li>constraint</li>
<li>containment</li>
<li>handle</li>
</ul>
</body>
</html>
Producción:
Opciones de devolución de llamada
| onChange | Se activa cada vez que cambia el orden de clasificación mientras se arrastra. Obtiene el elemento afectado como su parámetro. |
| onActualizar | Se activa al finalizar una operación de arrastre que da como resultado un cambio en el orden de los elementos. |
Publicación traducida automáticamente
Artículo escrito por swapnil074 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA