Question

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

我有一些问题

1）我没有从源列表中检测到任何类型的拖动事件盒子/我似乎无法从中拖出

2）我可以从桌面拖动到目标列表框，我能够检测'dragenter''dragover'和'dragexit'事件。我注意到了我的'dragenter'回调中的事件参数未定义 - 是这个问题？

3）我无法弄清楚如何完成拖放操作。来自https://developer.mozilla.org/En/DragDrop/Drag_Operations#Performing_ ...... “如果鼠标是在有效掉落的元素上释放的话目标，即取消最后一个dragenter或dragover的目标事件，然后下降将成功，并且下降事件将触发目标。否则，拖动操作被取消而不会掉线事件被解雇了。“

这似乎指的是'drop'事件，尽管没有列于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>

Answer 1

我在使用xulrunner 1.9.0而不是1.9.1时引入了这些功能。

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

1 个答案: