`
zhongzhihua
  • 浏览: 312411 次
  • 来自: ...
社区版块
存档分类
最新评论

DragAndDrop

    博客分类:
  • xul
阅读更多

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

 

分享到:
评论
1 楼 Minke 2007-08-21  
为什么我用这个例子没有办法实现拖拽啊,发现nsDragAndDrop.js中的startDrag函数也能调用DragAndDrop.js中的onDragStart,返回也正确,但是nsDragAndDrop.js中的“var transArray = Components.classes["@mozilla.org/supports-array;1"]            .createInstance(Components.interfaces.nsISupportsArray);”
却怎么也不能执行过去,这是为什么啊?

相关推荐

    Android中Drag and Drop拖拽功能的使用

    在Android开发中,拖放(Drag and Drop)功能是一种常见的用户交互方式,允许用户通过手势将一个对象从一处移动到另一处。这个功能在许多场景下都非常实用,比如整理应用抽屉、移动文件或者在布局中调整控件位置等。...

    Java中的Drag and Drop拖拽技术

    "Java中的Drag and Drop拖拽技术" Java中的Drag and Drop拖拽技术是指在Java应用程序中,实现拖拽操作的技术。Drag and Drop技术可以将数据从一个组件拖拽到另一个组件中,实现数据的传输和交互操作。 Drag and ...

    Android简单的拖拽操作(DragAndDrop)

    在Android开发中,拖放(DragAndDrop)功能是一个常用且有趣的交互方式,它允许用户通过手势将一个视图移动到另一个位置,或者在不同的视图之间传递数据。本示例将详细介绍如何实现一个简单的拖放操作,并解决你在...

    Drag and Drop Component Suite 3.7 (拖放)

    《Drag and Drop Component Suite 3.7:Delphi中的拖放技术详解》 在软件开发过程中,用户界面的易用性和交互性是至关重要的因素之一。"Drag and Drop Component Suite 3.7"是一个专为Delphi开发者设计的组件包,它...

    DragAndDrop_Demo源码

    【标题】"DragAndDrop_Demo源码"是关于C++编程的一个实例,主要展示了拖放(Drag and Drop)功能的实现。在计算机图形用户界面(GUI)开发中,拖放功能允许用户通过鼠标或其他输入设备将一个对象从一处拖动到另一处...

    Drag and Drop Component Suite Version 5.2 Full Source

    "Drag and Drop Component Suite Version 5.2 Full Source" 是一个专门用于开发具有拖放功能的组件套件的完整源代码版本。这个组件库通常是为了帮助程序员在应用程序中实现更直观、用户友好的交互设计而设计的。在这...

    C#实现Drag and Drop操作例子

    在C#编程中,Drag and Drop操作是一种常见且实用的功能,允许用户通过鼠标将对象从一个位置拖动到另一个位置,比如在不同的控件、窗口甚至应用程序之间移动数据。这个功能在开发桌面应用时,特别是在文件管理或者...

    DragandDrop.rar_dragAndDrop

    本资料"DragandDrop.rar_dragAndDrop"聚焦于在Internet Explorer(IE)浏览器中实现文件拖放的扩展功能,为开发者提供了宝贵的指导。 文件拖放技术的核心在于HTML5中的Drag and Drop API,这是一个强大的功能,使得...

    WPF鼠标拖放操作DragAndDrop

    在Windows Presentation Foundation (WPF) 中,鼠标拖放操作(DragAndDrop)是一种常见的用户交互方式,它允许用户通过鼠标将一个元素从一处移动到另一处。这种功能在各种应用程序中都有广泛的应用,例如文件管理器...

    DragAndDrop_src源码

    "DragAndDrop_src源码" 是一个专门针对C++编程语言设计的项目,它提供了实现拖放(Drag and Drop)功能的源代码。在Windows应用开发中,拖放操作是常见的用户交互方式,允许用户通过鼠标将一项内容从一处拖动到另一...

    draganddrop拖放库vuedndmobile

    Vue DnD Mobile,全称为"Vue Drag and Drop Mobile",是专门为Vue.js开发的一个拖放库,专为移动设备优化,使得在触摸屏上的交互变得更加自然和流畅。 拖放(Drag and Drop,简称DnD)是一种常见的用户交互模式,...

    Ole Drag and Drop Example.

    标题 "Ole Drag and Drop Example" 提供了一个关于如何在应用程序中实现OLE拖放操作的示例。在编程中,OLE(Object Linking and Embedding)是微软开发的一种技术,允许不同应用程序之间的数据共享和交互。拖放功能...

    表格拖拽排序插件 Table Drag and Drop JQuery plugin v0.7

    表格拖拽排序插件 Table Drag and Drop JQuery plugin v0.7 最新0.7版本

    jquery 实现Drag and drop的例子

    本篇文章将深入探讨如何使用jQuery实现拖放(Drag and Drop)功能,特别是针对图片的拖放操作。拖放功能是网页交互中常见的一种增强用户体验的方式,常用于文件上传、页面元素排序等场景。 首先,我们需要引入jQuery...

    掌握JavaScript中的Drag and Drop API:交互式Web应用开发指南

    本文将详细介绍Drag and Drop API的基本概念、事件处理、以及如何在JavaScript中使用这个API来实现拖拽功能。 Drag and Drop API为Web应用带来了强大的交互性。通过本文的介绍和示例代码,开发者应该能够理解并实现...

    shell drag and drop for .net

    Shell Drag and Drop for .NET 是一个专为.NET框架设计的组件,它允许开发者在Windows应用程序中实现更加丰富和直观的拖放操作。这个组件的独特之处在于它能够在拖放过程中显示一个图片来呈现拖动的轨迹,提升了用户...

    拖拽 Draganddrop.html

    【标题】:“拖拽 Draganddrop.html” 在Web开发中,拖放(Drag and Drop)功能是一项常用的技术,允许用户通过鼠标操作将元素从一处拖动到另一处,实现数据移动或交互。在这个实例中,“Draganddrop.html”很可能...

    ios-iOS11 Drag and Drop功能演示.zip

    在iOS 11中,Apple引入了一项名为“Drag and Drop”的强大功能,极大地提升了用户在设备上处理和移动内容的便捷性。这个功能允许用户通过简单的手势将内容(如文本、图片、文件等)从一个应用拖动到另一个应用,从而...

    The Drag and Drop Component Suite for Delphi XE10

    对于Delphi开发者来说,"The Drag and Drop Component Suite for Delphi XE10"是一款非常实用的工具,它极大地简化了在Delphi XE10环境下实现拖放功能的复杂度。 该组件套件是基于先前版本XE7的修改版,经过优化后...

    gwt 之dualListField (drag and drop)

    "gwt 之dualListField (drag and drop)"是一个这样的实例,它实现了双列表框功能,并支持拖放操作。这个功能在很多场景下都非常实用,比如在用户需要进行项选择或分类时。 GWT的DualListField控件通常由两个并排的...

Global site tag (gtag.js) - Google Analytics