Forums : Xul, Xbl, JS...

Aller à la discussion :  Plus récente Plus ancienne

Aller à la page :  1 2

# Jquery et drag and drop en remote Xul

Envoyé par : trblft

Date : 20/04/2008 12:38

Bonjour à tous, si quelqu'un a le temps de regarder cet exemple de code, qui est très court :

droppable Jquery

J'ai essayé de le mettre dans ma page en remote Xul, le problème c'est que je ne sais pas si ça peut fonctionner, et si oui, sur quels éléments? Dans mon cas, j'ai 3 arbres générés par RDF avec des treeitems générés (ce sont des RDF content tree) et je voudrais faire glisser des treeitems de l'un vers l'autre, le "déposer" déclenchant l'appel d'un script.

Si vous voulez voir le code source de l'arbre, c'est là :

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window
 id="base"
 title="Page de travail Progressio"
 xmlns:html="http://www.w3.org/1999/xhtml"
 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 xmlns="http://www.mozilla.org/keymaster/gatekeeper
/there.is.only.xul">
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/pro_objects.js" type="text/javascript"></script>
<script src="./js/jquery.dimensions.js" type="text/javascript"></script>
<script src="./js/ui.mouse.js" type="text/javascript"></script>
<script src="./js/ui.draggable.js" type="text/javascript"></script>
<script src="./js/ui.draggable.ext.js" type="text/javascript"></script>
<script src="./js/ui.droppable.js" type="text/javascript"></script>
<script src="./js/ui.droppable.ext.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(".dragit").draggable({helper: 'clone'});
$(".dragit").droppable({
accept: ".dragit",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
alert("Dropped!");
}
});
});
</script>
<hbox id="main" flex="1">
<popupset>
 <menupopup id="context_menu" class="context" value="0">
   <menuitem id="modifier" label="Modifier" oncommand="modify_form(event);"/>
   <menuitem id="supprimer" label="Supprimer" oncommand="delete(event);"/>
   <menuitem id="copier" label="Copier" oncommand="copy(event);"/>
   <menuitem id="coller" label="Coller" oncommand="paste(event);"/>
 </menupopup>
</popupset>
<tree id="items" flex="1" datasources="items.php" ref="pro:all" context="context_menu" hidecolumnpicker="true">
 <treecols>
   <treecol id="name" label="Matières - Disciplines - Chapitres - Items" primary="true" flex="1"/>
 </treecols>
 <template>
   <rule>
     <treechildren>
      <treeitem uri="rdf:*" id="rdf:pro:rdf#id" class="dragit">
        <treerow>
          <treecell label="rdf:pro:rdf#display"/>
        </treerow>
      </treeitem>
     </treechildren>
   </rule>
 </template>
</tree>
<splitter collapse="before" ><grippy /></splitter>
<tree  id="nomenclatures" flex="1" datasources="nomenclatures.php" ref="pro:all" context="context_menu" hidecolumnpicker="true">
 <treecols>
   <treecol id="name" label="Matières - Livres - Sources - Fiches - Exercices - Nomenclatures" primary="true" flex="1"/>
 </treecols>
 <template>
   <rule>
     <treechildren>
      <treeitem uri="rdf:*" id="rdf:pro:rdf#id" class="dragit">
        <treerow>
          <treecell label="rdf:pro:rdf#display"/>
        </treerow>
      </treeitem>
     </treechildren>
   </rule>
 </template>
</tree>
<splitter collapse="before" ><grippy /></splitter>
<tree id="details" flex="1" datasources="details.php" ref="pro:all" onselect="get_tree_element(event);" context="context_menu" hidecolumnpicker="true">
 <treecols>
   <treecol id="name" label="Professeur - Services - Evaluations - Détails" primary="true" flex="1"/>
 </treecols>
 <template>
   <rule>
     <treechildren>
      <treeitem uri="rdf:*" id="rdf:pro:rdf#id" class="dragit">
        <treerow>
          <treecell label="rdf:pro:rdf#display"/>
        </treerow>
      </treeitem>
     </treechildren>
   </rule>
 </template>
</tree>
</hbox>
</window>

# Re: Jquery et drag and drop en remote Xul

Envoyé par : hhf

Date : 06/05/2008 13:34

je te conseil d'aller voir ma demo, mais, je n'ai pas le temps desuite de faire la doc, mais promis je tarde pas
demo drag&drop tree

# Re: Jquery et drag and drop en remote Xul

Envoyé par : trblft

Date : 14/05/2008 23:50

P... c'est bluffant, exactement ce dont je rêve, par contre ça ne marche que sous Firefox 2, pas sous firefox 3, c'est bizarre non?

As-tu envoyé un rapport d'erreur à Mozilla?

# Re: Jquery et drag and drop en remote Xul

Envoyé par : trblft

Date : 15/05/2008 00:04

Où peut-on trouver la doc de cette balise <dragbox>? Je ne la trouve nulle part, même pas une page sur google, toutes pointent vers un paquet Debian qui ne semble pas avoir grand-chose à faire avec...

Si c'est pas indiscret, t'as trouvé ça où? Désolé si c'est idiot comme question mais je débute et je n'ai vu de dragbox nulle part.

# Re: Jquery et drag and drop en remote Xul

Envoyé par : trblft

Date : 15/05/2008 00:24

Bon, je viens de comprendre que c'était du XBL en lisant ton post précédent, et j'ai pas eu le temps de creuser cette technologie, mais je crois que je vais devoir m'y mettre.

En tout cas chapeau bas, le fichier dragbox.xml est monstrueux, ça a pas du être de la tarte de se coller un tel boulot.

Une fois fait, c'est diabolique, par contre si on s'imagine devoir refaire ça uniquement en javascript, j'ose pas imaginer la galère.

Ton exemple pourrait être un super apport au remote xul en tout cas.

Juste une remarque : juste avant le drop, en survolant la zone droppable, l'item dragué apparaît deux lignes ou 4 lignes en dessous de la souris et de la ligne indiquant où on s'apprête à le mettre. C'est un détail mais ça gêne un peu l'utilisateur.

Merci d'avoir fait partager ton boulot en tout cas.

# Re: Jquery et drag and drop en remote Xul

Envoyé par : hhf

Date : 15/05/2008 19:41

Ce WE, je vais essayer de corriger mes XBLs pour que cela fonctionne sous FF3. Promiq, et je verais pour une doc. Pour ta remarque, je vois pas trop où est le PB, qu'est ce qui te gene dans le fait que les items draggés apparaissent en dessous de la souris. Que proposes tu ?

# Re: Jquery et drag and drop en remote Xul

Envoyé par : Christophe Charron

Date : 16/05/2008 09:14

Bonjour, si je peux aider de quelque manière que ce soit, n'hésite pas.
Je peux comparer des comportements avec FF 2.0.0.14, flock 1.1.2, prism 0.9 sous WXP et FF3 beta diverses sous ubuntu 7.10 8.04 et kubuntu 7.10 8.04 via la dernière version de virtualbox.

# Re: Jquery et drag and drop en remote Xul

Envoyé par : trblft

Date : 16/05/2008 18:38

Que proposes tu ?

Ben juste que l'item "dragué" apparaisse à peu près au même niveau que la flèche noire (très pratique d'ailleurs) qui montre où il sera inséré.

C'est qu'un tout petit détail, soyons clairs, si tu n'as pas le temps de le faire je m'en passerai très volontiers. Le fait de disposer d'un drag and drop aussi efficace sous FF3, c'est déjà largement suffisant.

Moi je peux tester sous les mêmes système que Christophe Charron aussi si ça aide.

# Re: Jquery et drag and drop en remote Xul

Envoyé par : hhf

Date : 16/05/2008 18:43

BOn, ca y est pour le dragbox, plus que quelque verif et ca doit etre bon. Pour l'item draggé, je look. J'essaye de posté ca se soir avec une doc

# Re: Jquery et drag and drop en remote Xul

Envoyé par : hhf

Date : 16/05/2008 22:10

voila, c'est la que ca se passe : demo

Pour ton histoire de l'item draggé, apres essai, j'ai laissé comme avant, car le probleme, c'est que ca permettait de passé le curseur au dessus du popup qui contient les elements draggés... et cela posait probleme ca la popup n'est pas enfant du dragbox, donc, je peut pas le retrouvé facilement.

# Re: Jquery et drag and drop en remote Xul

Envoyé par : trblft

Date : 18/05/2008 16:55

ça marche grave!! En fait je retire ce que j'ai dit : Peut-être que le fait que l'item dragué, avant droppage, soit plus bas, permet de mieux voir ce qu'on fait. Il faudrait que je teste longuement pour l'affirmer mais bon, c'est vraiment très confortable tel quel, et surtout terriblement efficace, donc tu peux t'en tenir là en ce qui me concerne. Bon boulot, franchement, c'est le "bout de code" qui tue qui m'a rendu le plus service depuis que je code, même si je ne code pas depuis longtemps.

Dernière requête : Mon application sera libre, sous licence GPL probablement, pourrais-je y inclure ton code? Autrement dit ton code est-il libre?

# Re: Jquery et drag and drop en remote Xul

Envoyé par : hhf

Date : 18/05/2008 19:15

Dernière requête :
Mon application sera libre, sous licence GPL
probablement, pourrais-je y inclure ton code?
Autrement dit ton code est-il libre?

sans probleme, au contraire

# Re: Jquery et drag and drop en remote Xul

Envoyé par : trblft

Date : 18/05/2008 21:30

Aah, merci bien, autant pour l'effort de programmation que pour le geste, je te tiens au courant de l'évolution du programme.

# Re: Jquery et drag and drop en remote Xul

Envoyé par : hhf

Date : 19/05/2008 01:01

j'ai ouvert une nouvelle sous section dans le wiki ou je vais posé mes XBLs une fois leur mise à jour de compatibilité effectué. Ce soir, j'ai posté un accordion. J'espere que ca te servira aussi. je n'ai helas pas eu le courage de faire la doc de dragbox. mardi, j'aurais ma soiree normalement.

accordion

# Re: Jquery et drag and drop en remote Xul

Envoyé par : trblft

Date : 25/05/2008 00:17

Je vois à peu près ce que c'est, effectivement ça pourrait me servir un jour mais pas tout de suite, le drag and drop va déjà bien m'occuper.

J'ai quelques questions dessus :

1) Je veux que le drag and drop ne détruise pas l'item draggé, est-ce possible?

2) Je veux insérer une cellule vide dans le treeitem draggé, tout au début, juste après qu'il soit droppé, avant qu'il s'insère, est-ce possible également?

Aller à la page :  1 2

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.