Forums : Xul, Xbl, JS...

Aller à la discussion :  Plus récente Plus ancienne

# [Résolu] ListBox personalisé avec drag and drop

Envoyé par : mothsart

Date : 16/04/2010 10:18

Ayant remarqué qu'il y a plusieurs solutions (avec XBL entre autre) pour arriver à des résultats similaires, je m'en remet à votre expérience.

En effet, j'aimerais créer une liste dont les items seraient constitués d'un checkbox et d'un label indépendant.

En effet, j'ai remarqué sur le XUL periodic table que des listbox avec des checkbox étaient possible mais le label et le checkbox sont indissociable : il est impossible d'obtenir 2 évenements différents quand on clique sur le checkbox et sur le label. (j'espère être clair)

De l'autre, il existe des listbox à labels multiples mais les évenements ne sont perçu que sur les listitem et non sur chaque label séparément.

Sachant que la finalité serait de pouvoir agencer les listitem avec des glisser/déposer... (je développe mon extension sur firefox 3.6 : j'ai donc accès au dernières évolutions présenter par laurent jouanneau : [exemple|http://ljouanneau.com /lab/html5/demodragdrop.xul])

Qu'elle serait la solution la plus viable?

J'imagine qu'il faut soit créer un xbl spécifique en se basant sur le listbox existant soit créer quelque chose de similaire avec un grid.

Peut-être qu'il existe plus simple?

# Re: ListBox personalisé avec drag and drop

Envoyé par : thefab

Date : 17/04/2010 07:06

En effet, j'ai remarqué sur le XUL periodic table que des listbox avec des checkbox étaient possible mais le label et le checkbox sont indissociable : il est impossible d'obtenir 2 évenements différents quand on clique sur le checkbox et sur le label. (j'espère être clair)

Si, si, c'est possible mais il faut forcer le passage des évènements aux enfants https://developer.mozilla.org/fr/XUL/Att(..) (il faut alors créer 2 éléments distincts) genre (de tête):

<listitem allowevents="true">
  <chechbox/>
  <label/>
<listitem>

# Re: ListBox personalisé avec drag and drop

Envoyé par : mothsart

Date : 17/04/2010 08:58

C'est évidement une bonne solution! (Je pense que je me suis vraiment compliqué en créant un xbl rien que pour ça...) Seul ombre au tableau : mon drag ne s'applique plus au listitem mais soit au checkbox soit au label :

<listitem ondragstart="return dragStart(event);" ondragend="return dragEnd(event);"allowevents="true">
 <chechbox/>
 <label value="test" />
<listitem>

Désolé, je suis peut-être tatillon.

# Re: ListBox personalisé avec drag and drop

Envoyé par : mothsart

Date : 18/04/2010 07:55

Bon, la réponse est en fait tout aussi simple... le drag and drop sélectionne par défaut (evt.target) les élements XUL les plus élémentaires. Il suffit ensuite de lui préciser que c'est le noeud parent qui doit être glisser... Je laisse un exemple de code pour ceux qui serait confronté au même problème :

 function dragStart(evt){
   evt.dataTransfer.effectAllowed='move';
   evt.dataTransfer.setData('text/plain', 'Data to Drag');
   evt.dataTransfer.setDragImage(evt.target.parentNode,evt.clientX,10);
   return true;
 }

J'intercepte le déplacement de la souris : evt.clientX afin de rendre le drag plus naturel. (au lieu d'avoir l'objet déplacé au coin en bas à droite)

# Re: [Résolu] ListBox personalisé avec drag and drop

Envoyé par : thefab

Date : 18/04/2010 08:58

Hum, pas besoin de parentNode, il faut utiliser currentTarget (ou un autre) dans ta fonction dragStart.

alert(evt.currentTarget);

Devrait t'afficher ton listitem et pas ton label ou checkbox

# Re: [Résolu] ListBox personalisé avec drag and drop

Envoyé par : mothsart

Date : 19/04/2010 14:57

En effet, c'est propre et efficace dût moment qu'on gratte un peu... (je trouve qu'il est pas toujours aisé de trouver la bonne info au bon endroit)

# Re: [Résolu] ListBox personalisé avec drag and drop

Envoyé par : thefab

Date : 21/04/2010 05:22

je trouve qu'il est pas toujours aisé de trouver la bonne info au bon endroit

Ça c'est bien vrai... mais c'est pour ça qu'il existe ce forum ;-)

Il n'est plus possible de poster des messages dans ce forum.


Copyright © 2003-2013 association xulfr, 2013-2016 Laurent Jouanneau - Informations légales.

Mozilla® est une marque déposée de la fondation Mozilla.
Mozilla.org™, Firefox™, Thunderbird™, Mozilla Suite™ et XUL™ sont des marques de la fondation Mozilla.