Visualisation d'une page Webjax
Droppables ( )
L'objet Droppables() permet de créer des éléments DOM qui peuvent "recevoir" des éléments DOM "glissés", "draggés" ou "déplacés" jusqu'à eux (ndr : au dessus d'eux).
Conformément à l'aspect hautement paramétrable de Scriptaculous, il est possible de mettre en place des restrictions d'acceptation pour les éléments DOM à déplacer.
Conformément à ce même aspect, il est possible de placer des actions (ndr : exemples appels AJAX) sur les moments clés d'une utilisation de Droppables (ndr : action spécifque quand un élément DOM 'Draggable' se trouve au dessus d'un élément DOM 'Droppables', autre action lorsque l'élément DOM 'Draggable' a été "lâché" dans l'élément DOM "Droppables".
Les propriétés spécifiques de cet objet Droppables() sont présentées dans le tableau ci après :
Propriété
Type
Arguments
ou
Défaut
Détails
accept
String (classe CSS) ou Array (de classes CSS)
none
Permet de fixer une ou des classe(s) CSS.
Si cet argument est utilisé, seul les éléments DOM avec la ou les classes
CSS seront acceptées.
containment
String (id élément DOM) ou Array (d'éléments DOM)
none
L'élément Droppable n'acceptera des éléments DOM que si ces derniers sont contenus dans le ou
les éléments DOM précisés dans cette propriété.
Par défaut les éléments Droppables acceptent des éléments de tout type.
hoverclass
String (classe CSS)
none
Permet de fixer une classe CSS à utiliser pour l'élément Droppable lors d'un survol de celui-ci.
overlap
String
none
Si cette propriété est fixée à 'horizontal' ou à 'vertical', l'élément Droppable ne réagirat que
si plus de 50% de l'élément Draggable est passé au dessus.
greedy
Boolean
true
Permet de stopper la recherche de Droppable à un seul niveau (ndr : on ne tient pas compte d'une pile
d'éléments Droppable).
onHover (drag , drop , overlappct)
Function Callback
drag :
drop :
overlappct :
11/01/2007 : mise à jour à faire
onDrop (drag , drop , event )
Function Callback
drag :
drop :
event :
11/01/2007 : mise à jour à faire
Des exemples d'utilisation de cet objet sont présentés ci après.
!!! :: l'auteur conseille de prendre connaissance des détails de l'objet Draggable() avant de commencer l'étude de cet exemple.
En effet il est nécessaire de définir des éléments DOM 'Draggable' afin de pouvoir tester le concept de zone de "lâcher d'éléments".
Les différents exemples de cette page sont rapidement accessibles via la liste déroulante ci après :
Exemple d'utilisation simple de Droppables()
Cet exemple présente un exemple d'utilisation simple de l'objet Droppables().
L'exemple permet de d'interragir avec une zone 'Droppables' paramétrée simplement à l'aide
d'une zone Draggable définie.
L'exemple est testable ci après :
toto président, toto président, webjax c'est bien , webjax c'est bien
donnez moi de l'élément DOM à manger j'ai faim, hmhmhmhune bonne 'div' de test en apéro !!!
%
Le code source de cet exemple est présenté ci après :
Le code HTML de les éléments DOM :
Le code Javascript définissant l'élément Draggable et l'élément Droppable de l'exemple.
Conformément à l'aspect hautement paramétrable de Scriptaculous, il est possible de mettre en place des restrictions d'acceptation pour les éléments DOM à déplacer.
Conformément à ce même aspect, il est possible de placer des actions (ndr : exemples appels AJAX) sur les moments clés d'une utilisation de Droppables (ndr : action spécifque quand un élément DOM 'Draggable' se trouve au dessus d'un élément DOM 'Droppables', autre action lorsque l'élément DOM 'Draggable' a été "lâché" dans l'élément DOM "Droppables".
Les propriétés spécifiques de cet objet Droppables() sont présentées dans le tableau ci après :
| Propriété | Type | Arguments ou Défaut |
Détails |
| accept | String (classe CSS) ou Array (de classes CSS) | none |
Permet de fixer une ou des classe(s) CSS.
Si cet argument est utilisé, seul les éléments DOM avec la ou les classes CSS seront acceptées. |
| containment | String (id élément DOM) ou Array (d'éléments DOM) | none |
L'élément Droppable n'acceptera des éléments DOM que si ces derniers sont contenus dans le ou
les éléments DOM précisés dans cette propriété.
Par défaut les éléments Droppables acceptent des éléments de tout type. |
| hoverclass | String (classe CSS) | none | Permet de fixer une classe CSS à utiliser pour l'élément Droppable lors d'un survol de celui-ci. |
| overlap | String | none | Si cette propriété est fixée à 'horizontal' ou à 'vertical', l'élément Droppable ne réagirat que si plus de 50% de l'élément Draggable est passé au dessus. |
| greedy | Boolean | true | Permet de stopper la recherche de Droppable à un seul niveau (ndr : on ne tient pas compte d'une pile d'éléments Droppable). |
| onHover (drag , drop , overlappct) | Function Callback |
drag :
drop : overlappct : |
11/01/2007 : mise à jour à faire |
| onDrop (drag , drop , event ) | Function Callback |
drag :
drop : event : |
11/01/2007 : mise à jour à faire |
Des exemples d'utilisation de cet objet sont présentés ci après.
!!! :: l'auteur conseille de prendre connaissance des détails de l'objet Draggable() avant de commencer l'étude de cet exemple.
En effet il est nécessaire de définir des éléments DOM 'Draggable' afin de pouvoir tester le concept de zone de "lâcher d'éléments".
Les différents exemples de cette page sont rapidement accessibles via la liste déroulante ci après :
Exemple d'utilisation simple de Droppables()
Cet exemple présente un exemple d'utilisation simple de l'objet Droppables().
L'exemple permet de d'interragir avec une zone 'Droppables' paramétrée simplement à l'aide d'une zone Draggable définie.
L'exemple est testable ci après :
toto président, toto président, webjax c'est bien , webjax c'est bien
donnez moi de l'élément DOM à manger j'ai faim, hmhmhmhune bonne 'div' de test en apéro !!!
%
Le code source de cet exemple est présenté ci après :
Le code HTML de les éléments DOM :
Le code Javascript définissant l'élément Draggable et l'élément Droppable de l'exemple.
: 10/01/2007 18:21:49 | 
: Scriptaculous, Scriptaculous.js, web2.0, Drag&Drop, draganddrop, Droppables, glisser, déposer, glisserdéposer, exemple, utilisation, démo, 
