这里要讨论的drag&drop是指使用IE提供的内置机制,而不是使用鼠标模拟的那种"假"drag&drop,比如移动一个div或span的效果那种。
要实现和控制drag&drop操作,那么首先第一点要弄清楚的是,到底哪些元素是可以在Web上被drag的?实际上IE默认给我们并让我们drag的元素并不多,它们是:图片、选中的文字(包括页面文字和文字控件(input, textarea)中的文字)和连接(普通连接和锚点)。除此之外,别的Web元素默认都不支持drag操作(在这些元素上面drag其实就是选择操作了),所以要实现对元素默认的drag&drop控制,只能选这3类元素来操作。
接下来,那么哪些元素又是可以接受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')就行了。
===============================================================================
补充:
其实几乎所有的Html元素都是支持drag&drop的
因为 dataTransfer 中只能保存文本,所以微软缺省只提供了那三种元素的拖拽,其他元素的拖拽必须自己实现。
第一步是调用元素的 dragDrop(),应该在鼠标按下刚开始移动的时候。
第二步是响应 ondragstart 事件,设置 dataTransfer 中拖拽的文字。
后面的步骤就和系统缺省的拖拽一样了。
下面是一个可以拖拽标题的按钮。
<button onmousedown="event.srcElement.dragDrop();" ondragstart="event.dataTransfer.setData('Text', event.srcElement.value); event.dataTransfer.effectAllowed = 'CopyMove'; event.dataTransfer.dropEffect = 'move';">拖拽</button>
如果想拖拽元素,就要在 dataTransfer 中作文章,保存的文字是元素的id,在 drop 的时候,根据 id 找到被拖拽的元素,进行移动。
转自:
http://birdshome.cnblogs.com/archive/2006/07/22/Drag_Drop.html#457694
分享到:
相关推荐
而且我已经把windows和linux的vmtools包,以及解决拖拽的问题脚本Drag&Drop_FixPatch一并加入进来,欢迎大家下载使用。 注意:因为大小问题,我分为两卷: VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch(1) ...
使用Drag&Drop接受文件名的输入框(13KB)
而且我已经把windows和linux的vmtools包,以及解决拖拽的问题脚本Drag&Drop_FixPatch一并加入进来,欢迎大家下载使用。 注意:因为大小问题,我分为两卷: VMware6.0深度完美汉化版+vmtools+Drag&Drop_FixPatch(1) ...
Window下拖放操作Drag & Drop 全解析
Drag & drop source code android
NULL 博文链接:https://mingren135.iteye.com/blog/2095635
很不错的drag & drop,类似于igoogle,在个人主页上都用得上,没有设置保存功能,有兴趣的朋友可以自己试一下
WPF 实现了两个listbox之间拖动,drag&drop,并且有上下按钮控制listbox里面元素的移动,还有拖动时边框变色,1分,你值得拥有。
Enhanced Drag & Drop(3KB)
eclipse rcp 关于拖动的文档,里面也有代码例子,但不是完整demo
【类库与框架】★★★★★-DragKit - an iOS framework for enabling drag & drop【类库与框架】★★★★★-DragKit - an iOS framework for enabling drag & drop 1.适合学生学习研究参考 2.适合个人学习研究参考 3...
IOS应用源码之【类库与框架】DragKit - an iOS framework for enabling drag & drop behavior
IOS应用源码之【类库与框架】-DragKit - an iOS framework for enabling drag & drop behavior.rar
wpf拖拽移动列表项的功能,两个datagrid中可以互相拖拽并移动一行数据
drag和drop事件
Ole Drag and Drop Example.
基于 Windows Shell 的拖放支持,跨应用。
一个不错的示例,自己也收藏一下.
在同个页面的两个列表框之间互相拖动列表项!运行环境 Qt5.6.0 minGW;拖动到另一个列表框的同时要删除当前列表框的列表项