如何在XUL中的两个列表框之间拖放?

我正在尝试实现两个列表框之间的拖放。

我有一些问题

1)我没有从源列表中检测到任何类型的拖动事件 box/I似乎无法从中拖动

2)我可以从桌面拖动到目标列表框,并且可以 检测“DragCenter”、“DragOver”和“DragExit”事件。我注意到了 事件参数在我的“dragenter”回调中未定义- 这是个问题?

3)我不知道如何完成拖放操作。 从 https://developer.mozilla.org/En/DragDrop/Drag_Operations#Performing_ … “如果在有效放置的元素上释放鼠标, 目标,即取消最后一个DragEnter或DragOver的目标 事件,则丢弃将成功,并且丢弃事件将在 目标。否则,将取消拖动操作,并且不进行拖放操作。 事件被激发。”

这似乎是指一个“掉”事件,尽管没有一个 列在 https://developer.mozilla.org/en/XUL/Events . 我看不出来 检测拖动的结束以调用其中一个示例 我在MDC上找到的“dodrop()”函数。

我的例子,到目前为止: 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>