Forums : Xul, Xbl, JS...

Bonjour,

1. on s'en fiche un peu du resultat du template, ce serait plutôt ton source qu'il faudrait montrer
2. il est probable que l'utilisation d'un template cause des problèmes. Essaye d'abord avec une liste simple
3. plutôt que de repeter les attributs du drag etc, ce serait plus propre je pense de mettre les eventlistener adéquates via javascript, et directement sur la listbox
4. dragstart et dragend, c'est bien, mais c'est pas suffisant : tu n'a pas dit où le drop se faisait, ni comment il se faisait.

on s'en fiche un peu du resultat du template, ce serait plutôt ton source qu'il faudrait montrer

Oui, je l'ai rectifié sur tes conseils, bizarrement le dragstart fonctionne maintenant (ie le drag and drop commence), voici l'extrait du code javascript que je développe :

function dragStart(event) {
event.dataTransfer.setData('text/plain',getIdString(event));
event.dataTransfer.setDragImage(event.target,0,0);
return true;
}

Par contre, ça fonctionne sur un <listitem> (même généré par template), mais pas sur un <treeitem> contenant des <treerow> et <treecell>

dragstart et dragend, c'est bien, mais c'est pas suffisant : tu n'a pas dit où le drop se faisait, ni comment il se faisait.

Oui, parce que je voulais déjà tester le démarrage du drag, je n'avais même pas touché aux autres fonctions que dragStart, voilà ce que je constate, je fais un drop sur un tree :

<tree id="1200" flex="1" rows="10" datasources="../xml/xmlList.php?type_verbose=contenu_1" ref="*" querytype="xml" onselect="updateSelection(event);updateClipBoard(event);" context="1200_interfaceContext" ondragenter="return dragEnter(event);" ondragover="return dragOver(event);" ondrop="return dragDrop(event);" hidevscroll="true" hidehscroll="true" chromedir="ltr">

Voici mes 3 fonctions suivantes :

function dragEnter(event) {
   //var idelt = event.dataTransfer.getData('text/plain');
   return true;
}

function dragOver(event) {
   var idString = event.dataTransfer.getData('text/plain');
   alert(idString);
   return true;
}

function dragDrop(event) {
   var idString = event.dataTransfer.getData('text/plain');
   alert('tombé');
   return true;
}

J'ai fait un "alert" juste pour voir si l'évènement se produisait. Or le alert du dragOver se produit, mais pas celui du dragDrop, et ce même si je commente celui du dragOver. J'ai oublié, je fais le drag drop d'un <listitem> sur un <tree>. Donc ma question est maintenant pourquoi la fonction dragOver se déclenche et pas la fonction dragDrop?

Merci en tout cas de ta réponse

plutôt que de repeter les attributs du drag etc, ce serait plus propre je pense de mettre les eventlistener adéquates via javascript, et directement sur la listbox

Désolé j'ai pas compris cette partie. Tu veux dire que je peux remplacer dragstart sur chaque item par un autre attribut de la balise <listbox>?

function dragStart(event) { event.dataTransfer.setData('text/plain',getIdString(event)); event.dataTransfer.setDragImage(event.target,0,0); event.dataTransfer.effectAllowed = "all"; return true; }

function dragEnter(event) {
event.preventDefault(); return false;
}

function dragOver(event) {
event.preventDefault(); return false;
}

function dragDrop(event) {
   event.preventDefault();
   var idString = event.dataTransfer.getData('text/plain');
   alert(idString);
   var targetString = event.target.id;
   alert(targetString);    
   return true;
}

Bon, merci Laurent et merci à cette page également que j'aurai du lire dès le début, si je peux me permettre une petite critique du site MDC qui est par ailleurs très bien foutu, c'est que j'ai eu un mal fou à la trouver, en plus de grosses lenteurs depuis quelques jours. Gageons que c'est parce qu'ils sont en pleine refonte ou que ces pages sont récentes ou récemment modifiées.

Cette page me semble très complémentaire de l'exemple de Laurent pour comprendre le rôle de l'instruction event.preventDefault()

Y'a pas à dire, le drag and drop sur du Xul, c'est beau!

En fait je gère par le drag and drop des appels de scripts php qui écrivent dans la base de données, et au retour, l'arbre "victime" du drop voit son datasource rechargé, ce qui fait que le drag and drop est ici un simple déclencheur, mais c'est d'une simplicité incroyable dès qu'on a les 4 fonctions de base.

En route pour la joie!

ok cool que tu ais trouvé tout seul

en ce qui concerne MDC : son moteur de recherche totalement pourri diminue hélas son intérêt. Beaucoup râle à propos de ce site. L'ancienne version du site était mieux, surtout pour les traducteurs.

Bon c'est pas que moi alors, y'a des progrès à faire effectivement sur le tri des réponses au moins, mais il est incontournable, il faudrait presque un gars à plein temps pour remplir tout ça et faire le ménage entre anciennes et nouvelles fonctionnalités.

Pour la partie anglaise, il y a au moins un gars à temps plein pour tout documenter (Eric Shepherd). Mais pour les autres langues, c'est uniquement des volontaires effectivement..

Tiens d'ailleurs, il y a un projet en cours pour la reference XPCOM et interfaces. http://www.oxymoronical.com/experiments/xpcomref/

Deux curiosités m'amènent à modifier ce post : Le drag and drop marche parfaitement sur des listitem, mais pas sur des treeitems, bizarre non? Impossible de glisser un treeitem avec le dragstart déclaré dessus, par contre, ça marche si on le met sur le treechildren. Voici la démarche

function dragStart(event,itemType) {
var treeChildren=event.target;
event.dataTransfer.setData('text/plain','gneu!');
event.dataTransfer.setDragImage(treeChildren.childNodes,0,0);
event.dataTransfer.effectAllowed = "none";
return true;
}

 <treechildren ondragstart="return dragStart(event,'treechildren');">

Autre chose, dans ce code, j'ai bien mis event.dataTransfer.setDragImage(treeChildren.childNodes,0,0); à la place du code event.dataTransfer.setDragImage(event.target,0,0); car sinon, il se produit la chose étrange que même les lignes non sélectionnées glissent (tout du moins sur l'image).

Autre remarque, non négligeable, ça marche aussi quand on fait un drag depuis une fenêtre pour atteindre en drop un Iframe! Il suffit en effet que les deux fenêtres (celle visible par le Iframe et celle qui contient le Iframe) possède les fonctions citées ci-dessus.

Pour que ça marche, il suffit d'enlever l'attribut type du Iframe.