2010-04-08 92 views
0

我想实现两个列表框之间的拖放。如何在XUL中的两个列表框之间拖放?

我有几个问题

1)我没有检测到任何类型的从源列表中的任意拖拽事件 箱/我似乎不能够从它

2)我拖可以从我的桌面拖到目标列表框,我可以检测'dragenter''dragover'和'dragexit'事件。我注意到 ,我的'dragenter'回调中的事件参数未定义 - 是 这是一个问题吗?

3)我想不出如何完成拖放操作。 From 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['[email protected]/consoleservice;1'] 
      .getService(Components.interfaces.nsIConsoleService) 
      .logStringMessage(str); 

} 

]]> 
</script> 
</window> 

回答

1

我使用的XULRunner 1.9.0,而不是1.9.1何时引入这些功能。