这几天做了一些drag&drop操作方面的工作,在这里把一些注意事项记录下来,算是给自己备个忘,也给需要做类似工作的人留个树阴。这里要讨论的drag&drop是指使用IE提供的内置机制,而不是使用鼠标模拟的那种"假"drag&drop,比如移动一个div或span的效果那种。
要实现和控制drag&drop操作,那么首先第一点要弄清楚的是,到底哪些元素是可以在Web上被drag的?实际上IE默认给我们并让我们drag的元素并不多,它们是:图片、选中的文字(包括页面文字和文字控件(input, textarea)中的文字)和连接(普通连接和锚点)。除此之外,别的Web元素默认都不支持drag操作(在这些元素上面drag其实就是选择操作了),所以要实现对元素默认的drag&drop控制,只能选这3类元素来操作。
在BizStruct同学的斧正中提到,其实几乎所有的Html元素都是支持drag&drop的(见其回复),在此表示由衷的感谢。
接下来,那么哪些元素又是可以接受drop操作呢?任何页面上的可见元素都是可以接受drop操作的,而它们之间的不同只是在于默认的drop事件不一样。比如,文字控件(input, textarea)的默认drop事件就是获取drag操作传过来的文字内容;iframe元素的默认drop操作是到航道drag操作传过来的URL地址。当然绝大多数的Web元素的默认是操作是do nothing,什么也不做。
那么当进行drag&drop操作时,有那些是可控制和定制的内容呢?这里关于drag&drop提供了以下一些事件(我们把它们分为作用于来源对象和目的对象来分别讨论),先讨论主要作用于来源对象的事件:
·ondrag —— 在整个从drag动作开始,直道drop动作结束的过程中,都会触发的一个事件。
·ondragstart —— 在drag动作开始时,在来源对象上触发的一个事件。
·ondragend —— 在drop动作结束的时候,在来源对象上出发的一个事件。
而主要做要在目的对象上的事件:
·ondragenter —— 在drag动作进入某一有效目的元素时,在该目的元素上触发的一个事件。
·ondragover —— 在drag动作进入某一有效目的元素后,在该目的元素上触发的一个事件。
·ondragleave —— 在drag动作离开某一有效目的元素时,在该目的元素上触发的一个事件。
·ondrop —— 在任何有效目的元素上进行drop操作时,在该目的元素上触发的一个事件。
这里的来源和目的的划分不是绝对的,比如ondragover事件,在drag操作过程中,如果鼠标进入了来源对象中,同样的也会触发这个事件。这些事件触发的顺序是:来源对象 --> ondragstart --> ondrag --> ondragend;目的对象 --> ondragenter --> ondragover --> ( ondragleave| ondrap )。由于是分别在同一个对象上触发的事件,所以这个顺序很简单。那么对于一个完整的从来源对象到目的对象的drag&drop操作来说,事件的触发序列又是怎样呢?如果src表示来源对象,des表示目的对象,那么事件触发序列为:
src:ondragstart -->
src:ondrag --> des:ondragenter -->
des:ondragover --> (des:ondragleave |
des:ondrop )--> src:ondragend.
示例为:Drag
Source Drop
Destination// 如果alert窗口不响应鼠标点击可以使用键盘的space键来确定窗口
<Aonmouseover="status=this.innerText;returntrue;"ondragend="alert('src:on'+event.type)"onclick="returnfalse;">
DragSource</A>
<SPANondrop="alert('des:on'+event.type)"ondragleave="alert('des:on'+event.type)">DropDestination</SPAN>
了解了事件触发顺序后,定制drag&drop过程中鼠标的光标形状也是非常重要的一个内容。因为用户的drag&drop的整个过程都需要靠鼠标光标的形状指导其进行操作,如果不能实时的调整光标为适合的型状,drag&drop操作对用户来说将无异于朦眼寻物。IE提供了用来控制的drag&drop过程中光标形状的两个属性,它们是:effectAllowed和dropEffect。
其属性分别为:
·effectAllowed:copy, link, move, copyLink, copyMove, all,none & uninitialized.
·dropEffect: copy, link, move, none.
前者effectAllowed是用来控制允许drag&drop操作类型的,所以这里的effect不是显示的"效果",而是是否可以执行的"操作",并且该属性只能在ondragstart事件中进行初始化,之后再对其赋值将无效。当然如果只使用effectAllowed属性,就已经可以达到控制光标形状的作用了。只是effectAllowed属性在处理复合操作时,比如copyLink, copyMove和all,会默认显示靠前那个操作类型的鼠标类型。也就是说如果effectAllowed是copyMove,那么这是鼠标光标就是copy形状。这下就知道为什么还要弄个dropEffect属性了吧?不过这个dropEffect属性中指定的effect,只能是之前effectAllowed允许的操作类型范围中的值,否则没有效果(显示no-drop鼠标光标)。
示例为:
Drag Source Drop
Destination
<Aondragstart="event.dataTransfer.effectAllowed='copyMove';event.dataTransfer.dropEffect='move'"
onmouseover="status=this.innerText;returntrue;"
ondragover="event.dataTransfer.dropEffect='move';event.returnValue=false;event.cancelBubble=true;"
onclick="returnfalse;">DragSource</A>
<SPANondragover="event.dataTransfer.dropEffect='copy';event.returnValue=false;event.cancelBubble=true;">
DropDestination</SPAN>
查看代码时注意,你会发现在src和des的对象元素中,在ondragover事件里除了对dropEffect赋以适当的值外,还有两句话:
event.returnValue=false;
event.cancelBubble=true;
只是由于页面元素在接受dragover的时候,本身都有其默认的鼠标光标显示型状,所以为了让用户自定义的鼠标光标生效,就需要使事件event的returenValue为false值并停止当事件的冒泡(event.cancelBubble=true)。
到目前为止,一个完整的drag&drop过程就差数据传递了,其实忙活了半天,这才是藏在所有交互操作和显示效果下面最重要的步骤。这个过程需要借助于IE提供的DHTML Data Transfer对象来完成,在window对象的属性event对象中,分别有两个Data Transfer对象各自的一个实例:一个叫dataTransfer,另一个叫clipboardData。这两个对象实例的行为非常相似,但又有一些区别,clipboardData顾名思义,它使用操作系统的剪贴板来存取数据,并有3个方法;而dataTransfer通过操作一个自己的内部剪贴板来存取数据(每次ondragend事件触发后就自动清空了),除了有和clipboardData相同的3个方法外,还有两个属性(就是前面介绍的那两个effectAllowed和dropEffect)。
我们这里不对clipboardData作更多的讨论,继续来看dataTransfer对象。它包含3个方法,它们是:setData(sDataFormat, sText), getData(sDataFormat)和clearData([sDataFormat])。它们更详细的使用和参数请参阅MSDN,这里我只用它们来实现drag&drop的数据传递。
示例为:Drag
Source Drop
Destination
<Aondragstart="event.dataTransfer.effectAllowed='copyMove';event.dataTransfer.dropEffect='move';
event.dataTransfer.setData('TEXT',this.innerText);" onmouseover="status=this.innerText;returntrue;"
ondragover="event.dataTransfer.dropEffect='move';event.returnValue=false;event.cancelBubble=true;"
onclick="returnfalse;">DragSource</A>
<SPANondrop="this.innerText=event.dataTransfer.getData('TEXT');this.style.color='red';"
ondragover="event.dataTransfer.dropEffect='copy';event.returnValue=false;event.cancelBubble=true;">
DropDestination</SPAN>
其实很简单,就是在src的ondragstart中,调用event.dataTransfer.setData('TEXT', this.innerText),然后再des的ondrop事件中,调用this.innerText = event.dataTransfer.getData('TEXT')就行了。
分享到:
相关推荐
要使用该应用程序: 克隆 repo ( ) 导航到drag-and-drop/client/目录用 Chrome 打开index.html继续开发(在 Windows 中):依赖关系git bash 新产品管理鲍尔脚步克隆 repo ( ) 在 Git Bash 中,导航到drag-and-drop...
JQuery drag and drop substitution effect.
要使用该应用程序: 克隆 repo ( ) 导航到drag-and-drop-alt/client/目录用 Chrome 打开index.html继续开发(在 Windows 中):依赖关系git bash 新产品管理脚步克隆 repo ( ) 在 Git Bash 中,导航到drag-and-drop-...
Develop and deploy custom data driven and rich AJAX web and mobile applications with minimal coding using the drag and drop WaveMaker Studio Use the graphical WaveMaker Studio IDE to quickly assemble ...
Laravel减轻了许多Web项目中使用的常见任务,从而减轻了开发过程中的痛苦,例如: 。 。 用于和存储的多个后端。 富有表现力,直观的 。 数据库不可知。 。 。 Laravel易于访问,功能强大,并提供大型,...
一本很好的HTML5开发的教程 Browser support: What ...Implementing drag-and-drop with the “draggable” attribute New global attributes: “data-*,” “hidden,” “contenteditable,” “spellcheck,” and more
Drag and Drop Chapter 19. Usability Patterns Handling Feedback, Errors, and Warnings Part V: Server-Side Interaction Chapter 20. Understanding Ajax Database Interaction Connecting with PHP ...
拖放Angular Drag & Drop 已实现的 安全身份验证和授权工具与技术技术:HTML,MDBootstrap,CSS,Angular-10,Firebase,i18n,拖放,渐进式Web应用程序,jsPDF(将Receipt下载为PDF)。 数据库:Angular Firebase...
Koel(也称为koel,小写字母k)是一个简单的基于Web的个人音频流服务,客户端用Vue开发和服务器端用Laravel编写。 针对Web开发人员,Koel采用了一些更现代化的Web技术 - flexbox,audio和drag-and-drop API等等。
欢迎使用贡献进行描述现在开始使用DRAG AND DROP在vue.js上从头开始实现的纸牌。 它包含3种类型的纸牌,即蜘蛛(在我小时候就被Microsoft闻名),蜘蛛4套装和克朗代克。 我是自己学习Web开发的,没有任何课程或辅导...
It also features new chapters covering the drag-and-drop API as well as SVG. Explains how to create real-time HTML5 applications that tap the full potential of modern browsers Provides ...
Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和... Kendo UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件。
Kendo UI 包含了开发现代JavaScript所需要的所有一切,包括:强大的数据源,通用的拖拉 (Drag-and-Drop) 功能、模板和UI控件; ☆ 文件清单:☆ kendoui.aspnetmvc.2013.1.514.commercial.rar kendoui.complete....
Kendo UI是一个用于开发现在HTML UI操作界面的框架。基于最新技术HTML5、CSS3和...Kendo UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件。
基于angular版本开发, 项目截图 ! DEMO数据存储在IndexedDB,不要清除本地缓存:cookie及其他网站数据 ! 商业开发请开发对应后台服务 下载 前端 git clone https://github.com/bojue/Web-Editor.git cd Web-Editor ...
Easy drag and drop familiar interface. Resize, change dimensions, scale, crop, add text, optimize, rotate, flip, mirror and add watermark. 把图片存储于数据库中 With CuteEditor you can easily use a...
This practical guide shows you how to make your Java web applications more responsive and dynamic by incorporating new Ajaxian features, including suggestion lists, drag-and-drop, and more. Java ...
trello-board-web-components Url tentativa(nãotãobem sucedida rs)作为Web组件和自定义元素原始HTML的API使用。 Web组件自定义元素实用程序的通用根目录,阴影dom等。 尖刻的estas APIS? Web组件可以作为...
砖块设计快照描述基于React组件之间的原始约束设计,还原真实开发中组件编码过程,所见即所得。当前版本还在开发中,新功能持续更新.....欢迎关注! :package: 安装yarn add @brickd/react @brickd/react-web @...
它提供了一个开箱即用的响应式UI,可以与核心库进行交互,以查看,注释和操作可以嵌入到任何Web项目中的PDF。 您可以演示此应用程序演示的。 此存储库是专门为有兴趣实现放置区的所有用户设计的,在该放置区中,...