DragAndDrop

阅读更多

xul文件:

xml 代码
  1. xml version="1.0"?>  
  2. xml-stylesheet href="chrome://global/skin/" type="text/css"?>  
  3. <window title="Widget Dragger" id="test-window" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">  
  4.  <script src="chrome://global/content/nsDragAndDrop.js"/>  
  5.   <script src="chrome://global/content/nsTransferable.js"/>    
  6.     
  7.   <script src="script/DragAndDrop.js">script>  
  8.   <stack id="board" style="width:300px; height: 300px; max-width: 300px; max-height: 300px"    
  9.             ondragexit=" alert(2)"  
  10.             ondragover="nsDragAndDrop.dragOver(event,boardObserver)" ondragdrop="nsDragAndDrop.drop(event,boardObserver)">    
  11.   stack>    
  12.   <vbox>    
  13.   <button label="Button" elem="button" ondraggesture="nsDragAndDrop.startDrag(event,listObserver)"/>    
  14.   <button label="Check Box" elem="checkbox" ondraggesture="nsDragAndDrop.startDrag(event,listObserver)"/>    
  15.   <button label="Text Box" elem="textbox" ondraggesture="nsDragAndDrop.startDrag(event,listObserver)"/>    
  16.       
  17.   vbox>    
  18.   window>   

ondragexit是拖放后的事件,ondragenter是刚拖进去时触发的事件,

js文件:var listObserver = {
   onDragStart: function (evt,transferData,action){
     var txt=evt.target.getAttribute("elem");
     transferData.data=new TransferData();
     transferData.data.addDataForFlavour("text/unicode",txt); }
   // transferData.data.addDataForFlavour("text/html",txt); }
    };
     var boardObserver = {
     getSupportedFlavours : function () {
      var flavours = new FlavourSet();
       flavours.appendFlavour("text/unicode"); return flavours;
       },
     onDragOver: function (evt,flavour,session){},
     onDrop: function (evt,dropdata,session){
       if (dropdata.data!=""){
         var elem=document.createElement(dropdata.data);
         evt.target.appendChild(elem);
         elem.setAttribute("left",""+evt.pageX);
         elem.setAttribute("top",""+evt.pageY);
         elem.setAttribute("label",dropdata.data);            
         }
       }
       };

 

你可能感兴趣的:(Chrome,XML,CSS,HTML)