Question

I am trying to implement drag and drop between two listboxes.

I have a few problems

1) I am not detecting any drag events of any kind from the source list
box/ I do not seem to be able to drag from it

2) I can drag from my desktop to the target listbox and I am able to
detect ‘dragenter’ ‘dragover’ and ‘dragexit’ events. I am noticing
that the event parameter is undefined in my ‘dragenter’ callback – is
this a problem?

3) I cannot figure out how to complete the drag and drop operation.
From https://developer.mozilla.org/En/DragDrop/Drag_Operations#Performing_…
“If the mouse was released over an element that is a valid drop
target, that is, one that cancelled the last dragenter or dragover
event, then the drop will be successful, and a drop event will fire at
the target. Otherwise, the drag operation is cancelled and no drop
event is fired.”

This seems to be referring to a ‘drop’ event, though there is not one
listed at https://developer.mozilla.org/en/XUL/Events . I can’t seem
to detect the end of the drag in order to call one of the example
‘doDrop()’ functions that I find on MDC.

---

My example, so far: 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['[e-mail]/consoleservice;1']
           .getService(Components.interfaces.nsIConsoleService)
           .logStringMessage(str);

}

]]>
</script>
</window> 

Answer 1

I was using xulrunner 1.9.0 as opposed to 1.9.1 when these features were introduced.