DragAndDrop

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

 

xul文件:

xml 代码

 <? xml   version = "1.0" ?>
 <? xml-stylesheet   href = "chrome://global/skin/"   type = "text/css" ?>
 < window   title = "Widget Dragger"   id = "test-window"   orient = "horizontal"   xmlns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
   < script   src = "chrome://global/content/nsDragAndDrop.js" />
    < script   src = "chrome://global/content/nsTransferable.js" />

    < script   src = "script/DragAndDrop.js" > </ script >
    < stack   id = "board"   style = "width:300px; height: 300px; max-width: 300px; max-height: 300px"
              ondragexit = " alert(2)"
              ondragover = "nsDragAndDrop.dragOver(event,boardObserver)"   ondragdrop = "nsDragAndDrop.drop(event,boardObserver)" >
    </ stack >
    < vbox >
    < button   label = "Button"   elem = "button"   ondraggesture = "nsDragAndDrop.startDrag(event,listObserver)" />
    < button   label = "Check Box"   elem = "checkbox"   ondraggesture = "nsDragAndDrop.startDrag(event,listObserver)" />
    < button   label = "Text Box"   elem = "textbox"   ondraggesture = "nsDragAndDrop.startDrag(event,listObserver)" />

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