2010-04-08 38 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何時引入這些功能。