HTML5拖放API2

在HTML5中，已经支持在浏览器与其他应用程序之间的数据互相拖动，同时也大大简化了有关于拖放方面的代码。

实现拖放的步骤

在HTML5中要想实现拖放操作，至少要经过两个步骤：

  1. 将想要拖放的对象元素的draggable属性设为true（draggable="true"）。这样才能将该元素进行拖放。另外，img元素和a元素（必须指定href属性）默认允许拖放。
  2. 编写与拖放有关的事件处理代码。关于拖放存在的几个事件如下所示。

拖放的相关事件

事件 产生事件的元素 描述
dragstart 被拖放的元素。 开始拖放操作。
drag 被拖放的元素。 拖放过程中。
dragenter 拖放过程中鼠标经过的元素。 被拖放的元素开始进入本元素的范围内。
dragover 拖放过程中鼠标经过的元素。 被拖放的元素正在本元素范围内移动。
dragleave 拖放过程中鼠标经过的元素。 被拖放的元素离开本元素的范围。
drop 拖放的目标元素。 有其他元素被拖放到了本元素中。
dragend 拖放的目标元素。 拖放操作结束。

拖放示例如下，为使用方便，为jQuery增加如下函数：

Js代码  

  1. jQuery.fn.dragstart = function(handler) {
  2. return this.each(function() {
  3. this.addEventListener("dragstart", handler, false);
  4. });
  5. };
  6. jQuery.fn.drag = function(handler) {
  7. return this.each(function() {
  8. this.addEventListener("drag", handler, false);
  9. });
  10. };
  11. jQuery.fn.dragenter = function(handler) {
  12. return this.each(function() {
  13. this.addEventListener("dragenter", handler, false);
  14. });
  15. };
  16. jQuery.fn.dragover = function(handler) {
  17. return this.each(function() {
  18. this.addEventListener("dragover", handler, false);
  19. });
  20. };
  21. jQuery.fn.dragleave = function(handler) {
  22. return this.each(function() {
  23. this.addEventListener("dragleave", handler, false);
  24. });
  25. };
  26. jQuery.fn.drop = function(handler) {
  27. var handler1 = function(event) {
  28. handler(event);
  29. event.preventDefault();
  30. event.stopPropagation();
  31. };
  32. return this.each(function() {
  33. this.addEventListener("drop", handler, false);
  34. });
  35. };
  36. jQuery.fn.dragend = function(handler) {
  37. var handler1 = function(event) {
  38. handler(event);
  39. event.preventDefault();
  40. };
  41. return this.each(function() {
  42. this.addEventListener("dragend", handler, false);
  43. });
  44. };

拖放操作所使用的示例HTML页面代码如下：

Html代码  

  1. <!DOCTYPE html>
  2. <html lang="zh-cn" dir="ltr">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>施放示例</title>
  6. <script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
  7. <script type="text/javascript" src="../js/dragdrop.js"></script>
  8. </head>
  9. <body>
  10. <h1>简单拖放示例</h1>
  11. <div id="dragme" draggable="true" style="width:200px; border:1px solid gray; ">请施放</div>
  12. <div id="text" style="width:200px; height:200px; border:1px solid gray; "></div>
  13. </body>
  14. </html>

进行拖放操作的JavaScript代码如下：

Js代码  

  1. $(function() {
  2. $(document).dragover(function(event) {
  3. event.preventDefault();
  4. });
  5. $("#dragme").dragstart(function(event) {
  6. var dt = event.dataTransfer;
  7. dt.effectAllowed = ‘all‘;
  8. dt.setData("text/plain", "Hello World.");
  9. });
  10. $("#text").dragend(function(event) {}).drop(function(event) {
  11. var dt = event.dataTransfer;
  12. var text = dt.getData("text/plain");
  13. $(this).append(text);
  14. });
  15. });

代码要点说明：

  • 开始拖动（dragstart事件发生）时，把要拖动的数据存入DataTransfer对象（setData()方法）。DataTransfer对象专门用来存放拖放时要携带的数据，它可以被设置为拖动事件对象的dataTransfer属性。setData()方法中的第一个参数为携带数据的数据各类的字符串，第二个参数为要携带的数据。第一个参数中表示数据各类的字符串里只能填入类似“text/plain”或“text/html”的表示MIME类型的文字，不能填入其他文字。
  • 如果把“dt.setData("text/plain", "Hello World.")”改为“dt.setData("text/plain", this.id)”，因为把被拖动元素的id当成了参数，所以携带的数据就是被拖动元素中的数据了，因为浏览器在使用getData()方法读取数据时会自动读取该元素中的数据。
  • 针对拖放的目标元素，必须在dragend或dragover事件内调用“event.preventDefault()”方法。因为默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放到其中，必须把默认处理关闭。
  • 目标元素接受到被拖放的元素后，执行getData()方法从DataTransfer那里获得数据。getData()方法的参数为setData()方法中指定的数据种类。
  • 要实现拖放过程，还必须在目标元素的drop事件中关闭默认处理（拒绝被拖放），否则目标元素不能接受被拖放的元素。
  • 要实现拖放过程，还必须设定整个页面为不执行默认处理（拒绝被拖放），否则拖放处理也不能被实现。因为页面是先于其他元素接受拖放的，如果页面上拒绝拖放，则页面上其他元素就都不能接受拖放了。
  • 要使用元素可以被拖放，首先必须把该元素的draggable属性设为true。另外，为了让这个示例在所有支持拖放API的浏览器中都能正常运行，需要指定“-webkit-user-drag:element”这种Webkit特有的CSS属性。
  • 本示例中的数据种类使用了“text/plain”这个MIME类型，也可以从其他使用同样MIME类型的应用程序中把该类型的数据拖动到目标元素中。现在支持拖动处理的MIME的类型有：“text/plain（文本文字）”、“text/html（HTML文字）”、“text/xml（XML文字）”、“text/uri-list（URL列表，每个URL为一行）”。

DataTransfer对象的属性与方法

如果DataTransfer对象的属性和方法使用得好，可以实现定制拖放图标，让它只支持特定拖放（例如复制、移动等），甚至可以实现更复杂的拖放操作：

  • dropEffect属性：表示拖放操作的视觉效果，允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值为none、copy、link、move。
  • effectAllowed属性：用来指定当元素被拖放时所允许的视觉效果，可以指定的值为：none、copy、copyLink、copyMove、link、linkMove、move、all、unintialize。
  • type属性：存入数据的种类，字符串的伪数组。
  • void clearData(DOMString format)方法：清除DataTransfer对象中存放的数据，如果省略参数，则清除全部数据。
  • void setData(DOMString format, DOMString data)方法：向DataTransfer对象内存入数据。
  • DOMString getData(DOMString format)方法：从DataTransfer对象中读数据。
  • void setDragImage(Element image, long x, long y)方法：用img元素来设置拖放图标（部分浏览器中可以用canvas等其他元素来设置）。

setData()方法在拖放开始时向dataTransfer对象中存入数据，它用type属性来指定数据MIME类型，而getData()方法在拖动结束时读取dataTransfer对象中的数据。clearData()方法可以用来清除DataTransfer对象内的数据。

设定拖放时的视觉效果

dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示当一个元素被拖动时所允许的视觉效果，一般在ondragstart事件中设定，允许设定的值为none、copy、copyLink、copyMove、link、linkMove、move、all、unintialize。dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许设定的值为none、copy、link、move。dropEffect属性所表示的实际视觉效果必须在effectAllowed属性所表示的允许的视觉效果范围内。规则如下所示：

  1. 如果effectAllowed属性设定为none，则不允许拖放元素。
  2. 如果不dropEffect属性设定为none，则不允许被拖放到目标元素中。
  3. 如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉效果进行显示。
  4. 如果effectAllowed属性设定为具体效果（不为none、all），dropEffect属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中。

Js代码  

  1. $("#dragme").dragstart(function(event) {
  2. var dt = event.dataTransfer;
  3. dt.effectAllowed = ‘copy‘;
  4. dt.setData("text/plain", "Hello.");
  5. });
  6. $("#text").dragover(function(event) {
  7. var dt = event.dataTransfer;
  8. dt.dropEffect = ‘copy‘;
  9. event.preventDefault();
  10. });

自定义拖放图标

除了上面所说的使用effectAllowed属性与dropEffect属性外，HTML5中还允许自定义拖放图标——指的是在用鼠标拖动元素的过程中，位于鼠标指针下部的小图标。

DataTransfer对象有一个setDragImage()方法，该方法有三个参数，第一个参数image设定为拖放图标的图标元素，第二个参数为拖放图标离鼠标指针的x轴方向的位移量，第三个参数是拖放图标离鼠标指针的y轴方向的位移量。

Js代码  

    1. $(‘#dragme‘).dragstart(function(event) {
    2. var dt = event.dataTransfer;
    3. dt.setDragImage($(‘img‘).attr("src", "images/img1.jpg")[0], -10, -10);
    4. dt.setData("text/plain", "Welcome");
    5. });
时间： 2024-10-20 14:58:59

HTML5拖放API2的相关文章

HTML5 拖放（Drag 和 Drop）功能开发——基础实战

随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的功能.在生活中,拖放物品其实是相当常见的一个动作.标榜“互联网生活尖凿狮”的程序猿也在一直试图用鼠标模拟出“手”的操作,用来给用户以更好的体验,你可以抓住一个对象,并且拖动到你想放置的区域.很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件,比如<JS

HTML5——拖放

HTML5拖放 1.HTML5拖放 拖放(Drag和drop)是HTML5标准的组成部分. 2.拖动开始: ondragstart:调用了一个函数,drag(event),它规定了被拖动的数据 3.设置拖动数据 setData():设置被拖数据的数据类型和值. 4.放入位置: ondragover:事件规定在何处放置被拖动的数据. 5.放置: ondrop:当放置被拖放数据时,会发生drop事件 总结: 在拖动目标上触发事件(源元素): ondragstart:用户开始拖动元素时触发 ondra

HTML5拖放

拖放(drag和drop)是html5标准组成,下面我们从五个方面对其进行叙述,分别是如何成为拖动物体,如何成为拖动目标,拖动物体上拥有的事件,拖动目标上拥有的事件以及拖放物体间如何传递信息. 拖动物体上拥有的事件 dragstart (在物体刚被拖动时触发) drag (在dragstart事件触发之后就被触发) dragend (拖动事件结束时触发) 拖动目标上拥有的事件 dragenter (当拖拽元素进入放置目标时触发) dragover (当拖拽元素在放置目标中移动时触发,类似于mou

HTML5拖放API

拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 注释:在 Safari 5.1.2 中不支持拖放. 拖放步骤 1.对象元素的draggable属性设置为true(draggable="true").还需要注意的是a元素和img元素必须指定href.dragstart 被拖放的元素

HTML5拖放事件（Drag-and-Drop,DnD）

拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target)”之间传输数据的用户界面.下面例子将演示如何创建自定义拖放源和自定义拖放目标,前者传输数据而不是其文本内容,后者以某种方式相应拖放数据而不是仅显示它. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 注释:在

HTML5拖放(drag和drog)

拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就是把drapgable属性设置为true 2.拖动什么-ondragstart和setData(),规定元素被拖动时会发生什么? (1):ondragstart属性调用了一个函数drag(event),它规定了被拖动的数据. (2):dataTransfer.setData()方法设置被拖动数据的数

HTML5 拖放（Drag 和 Drop）详解与实例

简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaScript <p draggable="true" ondragstart="myFunction(event)">拖动我!</p> 提示: 链接和图片默认是可拖动的,不需要 draggable 属性. 定义和用法 在拖放的过程中会触发以下事件:

浅谈HTML5拖放

现在,新增的HTML5元素很多,也给开发者带来了很多便利,比如说:结构标记header .nav.arctile.section.footer 表单元素:url.date.emaile.search.tel.range.color.datalist.progress.meter.output等,还有一些webstroge元素.绘图元素.拖放api等,这里着重说一下拖放api. 在生活中,我们经常将桌面的应用程序元素,从一个地方拖拽到另外一个地方,开发者没有一种能实现这种操作的标准技术,在HTML

html5拖放操作

最近在看html5时看到的一个有意思的拖放效果,这里是简单的一个拖放删除元素的效果. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖放操作</title> <style> li{ list-style:none;width:100px; height: 100px; background: red; margin-bottom: