Comment glisser et déposer entre deux listes dans XUL?

Question

J'essaye d'implémenter le glisser-déposer entre deux listes de sélection.

J'ai quelques problèmes

1) Je ne détecte aucune événements de déplacement de toute sorte de la liste des sources boîte/je ne semble pas être en mesure de faire glisser de lui

2) I peut faire glisser de mon bureau à la liste de cibles et je suis capable de détecter les événements 'dragenter' 'dragover' et 'dragexit'. Je remarque que le paramètre d'événement est indéfini dans mon rappel de 'dragenter' - est ceci un problème?

3) Je n'arrive pas à comprendre comment effectuer l'opération glisser-déposer. De ... "Si la souris a été relâchée sur un élément qui est une cible valide, c'est-à-dire qui a annulé l'événement du dernier dragueur ou du dernier survol, la suppression sera réussie et un tirer sur sinon, l'opération de glissement est annulée et aucun événement n'est déclenché. "

Cela semble se rapporter à un événement 'drop', bien qu'il n'y en ait aucun listé à https://developer.mozilla.org/en/XUL/Events. Je ne peux pas sembler pour détecter la fin de la traînée afin d'appeler l'un des exemples "doDrop()" fonctions que je trouve sur MDC.

---

Mon exemple, jusqu'à présent: http://pastebin.mozilla.org/713676

<?xml version="1.0"?> 
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/ 
there.is.only.xul" 
onload="initialize();"> 
    <vbox> 
     <hbox> 
      <vbox> 
       <description>List1</description> 
       <listbox id="source" draggable="true"> 
        <listitem label="1"/> 
        <listitem label="3"/> 
        <listitem label="4"/> 
        <listitem label="5"/> 

       </listbox> 
      </vbox> 
      <vbox> 
       <description>List2</description> 
       <listbox id="target" ondragenter="onDragEnter();"> 
        <listitem label="2"/> 
       </listbox> 
      </vbox> 
     </hbox> 
    </vbox> 
<script type="application/x-javascript"> 
<![CDATA[ 
    function initialize(){ 
     jsdump('adding events'); 
     var origin = document.getElementById("source"); 
     origin.addEventListener("drag", onDrag, false); 
     origin.addEventListener("dragdrop", onDragDrop, false); 
     origin.addEventListener("dragend", onDragEnd, false); 
     origin.addEventListener("dragstart", onDragStart, false); 

     var target = document.getElementById("target"); 
     target.addEventListener("dragenter", onDragEnter, false); 
     target.addEventListener("dragover", onDragOver, false); 
     target.addEventListener("dragexit", onDragExit, false); 
     target.addEventListener("drop", onDrop, false); 
     target.addEventListener("drag", onDrag, false); 
     target.addEventListener("dragdrop", onDragDrop, false); 

    } 

    function onDrag(){ 
     jsdump('onDrag'); 
    } 

    function onDragDrop(){ 
     jsdump('onDragDrop'); 
    } 

    function onDragStart(){ 
     jsdump('onDragStart'); 
    } 

    function onDragEnd(){ 
     jsdump('onDragEnd'); 
    } 

    function onDragEnter(event){ 
     //debugger; 
     if(event){ 
      jsdump('onDragEnter event.preventDefault()'); 
      event.preventDefault(); 
     }else{ 
      jsdump("event undefined in onDragEnter"); 
     } 

    } 

    function onDragExit(){ 
     jsdump('onDragExit'); 
    } 

    function onDragOver(event){ 
     //debugger; 
     if(event){ 
      //jsdump('onDragOver event.preventDefault()'); 
      event.preventDefault(); 
     }else{ 
      jsdump("event undefined in onDragOver"); 
     } 

    } 

    function onDrop(event){ 
     jsdump('onDrop'); 
     var data = event.dataTransfer.getData("text/plain"); 
     event.target.textContent = data; 
     event.preventDefault(); 
    } 

function jsdump(str) 
{ 
Components.classes['...@mozilla.org/consoleservice;1'] 
      .getService(Components.interfaces.nsIConsoleService) 
      .logStringMessage(str); 

} 

]]> 
</script> 
</window> 

Answer 1

j'utilisais XULRunner 1.9.0 par opposition à 1.9.1 lorsque ces fonctionnalités ont été introduites.