Paramètres : Sortable.create(element HTML | id, {options})
Rôle : Crée une liste dont les éléments peuvent être déplacés.
Retourne : -
Note :
Options
tag:'li'|n'importe quel tag XHTML ???
Définit quels éléments enfant du conteneur rendre "sortables" par leur tag.
Pour une liste (ul), tout les items (li) seront transformés.
only:'nom_de_classe'
Restreint la sélection des éléments "sortables" par un nom de classe.
overlap:'vertical'|horizontal ???
Définie l'orientation de la liste.
constraint:'vertical'|horizontal
Restreint le déplacement des items sur l'axe X ou Y.
containment:[element1,…,elementn]|['id_element_1','…','id_element_2']
Autorise le déplacement d'items entre plusieurs conteneurs.
handle:element|'id_de_l_element' ???
Ajoutes l'option handle aux Draggables créés.
hoverclass:'nom_de_la_classe' ???
Ajoute l'option hoverclass aux Draggables créés.
ghosting:true|false
Déplace un clone l'élément lors du déplacement afin de laisser l'original à sa place.
dropOnEmpty:true|false ???
Déplace un clone l'élément lors du déplacement afin de laisser l'original à sa place.
scroll:entier ???
Permet de faire défiler le contenu en un point précis. Ne fonctionne que si le contenant possède la propriété overflow:scroll.
Placez donc ce code avant afin que tout fonctionne normalement :
Position.includeScrollOffsets = true
scrollSensitivity:20 (entier) ???
Sensitivité du défilement.
scrollSpeed:15 (entier) ???
Vitesse du défilement.
tree:true|false/dt>
Si vrai, donne les fonctionnalités de Sortable aux éléments listés dans treeTag.
treeTag:'ul'('tag')
Le type d'élément dans lequel sont contenus les éléments à lister.
Callback :
onChange:fonction(element)
Appelée quand l'ordre des éléments est changé pendant un déplacement.
onUpdate:fonction(conteneur)
Appelée à la fin du déplacement d'un élément.
Exemple 1
|
Exemple 2
|
Exemple 3
|
Exemple 4
|
Exemple 5CLiquez sur Tester et cliquez-glissez les éléments d'une même profondeur :
function tester()
{
Sortable.create('maListe3');
Sortable.create('maListe2',{containment:['maListe2']});
Sortable.create('maListe',{containment:['maListe']});
}