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