DragAndDrop

最新推荐文章于 2022-03-08 09:37:27 发布

iteye_9855

最新推荐文章于 2022-03-08 09:37:27 发布

阅读量282

点赞数

分类专栏： xul 文章标签： Chrome XML CSS HTML

xul 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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