不介绍具体情况，先看API，注意看后面括号的说明

  • dragstart：拖拽开始（应用于被拖拽对象）
  • drag：拖拽中（应用于被拖拽对象）
  • dragenter：拖拽到指定位置（应用于拖拽目标）
  • dragleave：拖拽离开指定位置（应用于拖拽目标）
  • dragover：拖拽在指定位置（应用于拖拽目标）
  • drop：在指定位置释放（应用于拖拽目标）
  • dragend：拖拽结束（应用于被拖拽对象）

事件

描述

目标

dragstart

开始拖对象时触发

被拖动对象

dragenter

当对象第一次被拖动到目标对象上时触发，同时表示该目标对象允许‘放’这动作

目标对象

dragover

当对象拖动到目标对象时触发

当前目标对象

dragleave

在拖动过程中，当被拖动对象离开目标对象时触发

先前目标对象

drag

每次当对象被拖动时就会触发

被拖动对象

drop

当发生“放”这动作时触发

当前目标对象

dragend

在拖放过程，松开鼠标时触发

被拖动对象

使用方法

在需要被拖拽的对象上设置属性draggable="true"，但设置此属性后，对象将不能被选中。

使用范围

不是所有的object都支持的，通常支持块，比如div p span，但不支持select option等,但可以把他们放到div里面。

例子见代码

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

 </head>

 <body>

     <script type="text/javascript">

         window.onload = function () {

             var obj = document.getElementById("obj");

             var left = document.getElementById("left");

             var right = document.getElementById("right");

             //设置拖拽的对象的光标

             obj.style.cursor = "move";

             obj.ondragstart = function (e) {//事件顺序：1

                 //设置内容，非必要,前为格式，后为值,取值为text|URL对应是text/plain|text/url-list,实际可为MIME，不同类型可同时保存

                 e.dataTransfer.setData("text", obj.id);

                 /*被拖动的元素能执行的行为，包括

                 none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。

                 move：应该把拖动的元素移动到放置目标。

                 copy：应该把拖动的元素复制到放置目标。

                 link：放置目标会打开拖动的元素(但拖动的元素必须是个链接，有URL地址)。

                 把元素拖动到放置目标上的时候，以上每一个值都会导致光标显示为不同的符号。

                 */

                 e.dataTransfer.dropEffect = "move";

                 /*仅设置dropEffect是无效的，需要结合effectAllowed，此属性表示允许拖动元素的那种行为，即移动此物体到能带有ondrop事件的物体上空时鼠标下方显示的样式，

                 取值如下

                 uninitialized：没有给被拖动元素设置任何放置行为。

 　　            none：被拖动的元素不能有任何行为

 　　            copy：只允许值为”copy”的dropEffect。

 　　            link：只允许值为”link”的dropEffect。

 　　            move：只允许值为”move”的dropEffect。

 　　            copyLink：允许值为”copy”和”link”的dropEffect。

 　　            copyMove：允许值为”copy”和”move”的dropEffect。

 　　            linkMove：允许值为”link”和”move”的dropEffect。

 　　            all：允许任意dropEffect。

 　　            要设置effectAllowed属性必须在ondragstart事件处理程序中设置。

                 */

                 e.dataTransfer.effectAllowed = "move";

                 //e.dataTransfer.setDataImage(Element image,long x,long y);//设置拖拽显示的替代图像。存在兼容问题

                 //e.dataTransfer.addElement(Element element);//设置在拖放的同时更随拖放的对象。存在兼容问题

                 return true;

             };

             obj.ondrag = function (e) {//事件顺序：2

                 //只要拖着没放，就一直执行，无论在那个对象上方

             };

             obj.ondragend = function (e) {//事件顺序：6

                 //拖放完成了，清理工作

                 e.dataTransfer.clearData("text");//不清理应该也没问题，会自动清理

             };

             left.ondragenter=right.ondragenter = function (e) {//事件顺序：3

                 this.style.backgroundColor = "rgb(230,230,230)";

             };

             left.ondragover = right.ondragover = function (e) {//事件顺序：4

                 e.preventDefault();//必须设置，否则无法执行ondrop

                 //这里设置当拖动的物体在目标物体上方移动时的代码

             };

             left.ondragleave = right.ondragleave = function (e) {//事件顺序：5(并列)

                 this.style.backgroundColor = "";

             }

             left.ondrop = right.ondrop = function (e) {//事件顺序：5(并列)

                 //e.dataTransfer.files如果是文件拖拽，可以读取

                 this.style.backgroundColor = "";

                 var id = e.dataTransfer.getData("text");

                 var element = document.getElementById(id);

                 if (element.parentElement&&element.parentElement!=this)

                     element.parentElement.removeChild(element);

                 this.appendChild(element);//同一对象重复添加不会错

             };

         };

     </script>

     <div id="left" style="width:150px;height:200px;border:1px solid black;float:left;">

         <span id="obj" draggable="true" style="border:2px dotted gray;">测试文字</span>

     </div>

     <div id="right"style="width:150px;height:200px;border:1px solid black;float:left;">

     </div>

 </body>

 </html>

关于HTML5的拖拽的更多相关文章

  1. HTML5之拖拽(兼容IE和非IE)

    前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...

  2. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  3. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  4. [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件

    前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...

  5. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  6. HTML5文件拖拽

    HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...

  7. HTML5 实现拖拽

    如图 可以从第一个方框拖拽花色到第二个方框中. 也可以再拖动回来. 具体代码实现 index.html <!DOCTYPE HTML> <html> <head> ...

  8. html5实现拖拽文件上传

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  9. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  10. HTML5原生拖拽/拖放(drag & drop)详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

随机推荐

  1. iOS 图片大小压缩 图片尺寸处理

    图片的压缩其实是俩概念,1.是 “压” 文件体积变小,但是像素数不变,长宽尺寸不变,那么质量可能下降,2.是 “缩” 文件的尺寸变小,也就是像素数减少.长宽尺寸变小,文件体积同样会减小. 这个 UII ...

  2. Oracle表格建立

    Oracle学习第一天:学习了如何在网页上建立表空间,以及在关联性表格上建立表格,填充表格,学习了如何建立自己的表空间.效果如下:

  3. Java开发11个过不去的梗

    现在随着编程的普及,作为java程序猿开发的过程逐渐的受到领导的重视,无论自己的经理是能看懂,还是不能看懂,一些事项必须注意起来,不要让自己将来处于不尴不尬的境地,当然这样也方便你我他 1.不在属性文 ...

  4. Ｃ＃+　AE　注意问题汇总（不断更新）

    1.AE的COM对象释放问题尤其是IFeatureCursor 建议用 ESRI.ArcGIS.ADF.ComReleaser.ReleaseCOMObject(pObj); 或者 int iRefs ...

  5. redis3.2 最新版本启动配置文件redis.conf详细说明

    Redis.conf文件内容详细说明: # 默认redis不是以后台进程的方式启动,如果需要在后台运行,需要将这个值设置成yes # 以后台方式启动的时候,redis会写入默认的进程文件/var/ru ...

  6. [UML]UML系列——活动图activity diagram

    系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) [UML]UML系列——类图Class [UML]UML系列——类 ...

  7. 什么叫session和cookie-及其设置

    http的无状态? 保持状态, 是指当程序关闭后重启, 上一次操作的历史还能继续, 保持的. 如word中的 "选项"设置. 如windows系统的设置等等. http的设计目的, ...

  8. 大组合数：Lucas定理

    最近碰到一题,问你求mod (p1*p2*p3*……*pl) ,其中n和m数据范围是1~1e18 , l ≤10 , pi ≤ 1e5为不同的质数,并保证M=p1*p2*p3*……*pl ≤ 1e18 ...

  9. URL、URN、URI的区别？

    URL.URN.URI区别 既然Web应用程序的文件等资源是放在服务器上,而服务器是因特网(Internet)上的主机,当然必须要有个方法,告诉浏览器到哪里取得文件等资源.通常会听到有人这么说:“你要 ...

  10. PHP中如何在数组中随机抽取n个数据的值 - array_rand()？

    PHP中如何在数组中随机抽取n个数据的值? 最佳答案 array_rand() 在你想从数组中取出一个或多个随机的单元时相当有用.它接受 input 作为输入数组和一个可选的参数 num_req,指明 ...