DragAndDrop

转自:http://zhongzhihua.iteye.com/blog/78894

 

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);            
         }
       }
       };

你可能感兴趣的:(html,xml,css,chrome,Blog)