拖放（Drag 和 drop）是 HTML5 标准的组成部分。即抓取对象以后拖到另一个位置。

例：将w3cschool图标拖动到矩形框中。

  1. <script>
  2. function allowDrop(ev)
  3. {
  4.     ev.preventDefault();
  5. }
  6.  
  7. function drag(ev)
  8. {
  9.     ev.dataTransfer.setData("Text",ev.target.id);
  10. }
  11.  
  12. function drop(ev)
  13. {
  14.     ev.preventDefault();
  15.     var data=ev.dataTransfer.getData("Text");
  16.     ev.target.appendChild(document.getElementById(data));
  17. }
  18. </script>
  19.  
  20. <body>
  21.  
  22. <p>拖动 RUNOOB.COM 图片到矩形框中:</p>
  23.  
  24. <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  25. <br>
  26. <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
  27.  
  28. </body>

步骤如下：

（1）设置元素为可拖放

使元素可拖动，把 draggable 属性设置为 true ：

  1. <img draggable="true">

（2）拖动什么 - ondragstart 和 setData()

ondragstart 属性：调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法：设置被拖数据的数据类型和值：

  1. function drag(ev)
  2. {
  3.     ev.dataTransfer.setData("Text",ev.target.id);
  4. }

解析：数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

（3）放到何处 - ondragover

ondragover 事件：规定在何处放置被拖动的数据。

（默认）无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

要通过调用 ondragover 事件的 event.preventDefault() 方法：

  1. event.preventDefault()

（4）进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

ondrop 属性调用了一个函数，drop(event)：

  1. function drop(ev)
  2. {
  3.     ev.preventDefault();
  4.     var data=ev.dataTransfer.getData("Text");
  5.     ev.target.appendChild(document.getElementById(data));
  6. }

解析：

  • 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素（目标元素）中

HTML5 学习05—— 拖放（Drag 和 Drop）的更多相关文章

  1. HTML5学习笔记 拖放

    拖放(Drag和drop)是html5标准的组成部分 拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素可拖 ...

  2. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  3. HTML5（四）Drag and Drop

    HTML5 拖放(Drag 和 Drop) 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素 ...

  4. 拖放(Drag和Drop)--html5

    拖放,就是抓取一个对象后拖放到另一个位置.很常用的一个功能,在还没有html5的时候,我们实现这个功能,通常会用大量的js代码,再利用mousemove,mouseup等鼠标事件来实现,总的来说比较麻 ...

  5. HTML5 拖放---drag和drop

    拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true:  例:<div id="div" draggable="true"&g ...

  6. HTML5拖拽/拖放(drag & drop)详解

    H5中拖拽属性: draggable: auto | true | false   拖动事件:   - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...

  7. 在Blazor中实现拖放(drag and drop)

    前言 我在实现一个含有待办列表功能的页面时,发现了一个好看的设计,它将待办分为--"待办","正在进行",和"已完成"三种状态,并且将待办通 ...

  8. HTML 5 拖放(Drag 和drop)

    浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把标签 draggable 属性设置为 true. 2.向标签添加on ...

  9. HTML5学习之拖放（十）

    l元素可以用于拖拽必须设置draggable="true"属性,img和a标签除外,她们两个默认就可以被拖拽 想做拖拽处理,就需要在Dom元素上监听拖放的事件:dragstart, ...

随机推荐

  1. Java基础知识➣发送Emai和访问MySQL数据库（七）

    概述 Java程序发送 E-mail 十分简单,但是首先你应该在你的机器上安装 JavaMail API 和Java Activation Framework (JAF) .Java访问数据则需要 使 ...

  2. Windows 7 64bit VS2015 配置CUDA

    1. 更新驱动 下载系统显卡驱动,首先在设备管理器中查看自己的显卡型号,我的是GeForce GTX 960,然后在官网下载对应的驱动程序并安装. 官网网址:NVIDIA 驱动程序下载   2. 安装 ...

  3. asp.net core 自定义401和异常显示内容（JWT认证、Cookie Base认证失败显示内容）

    asp.net core 2.0使用JWT认证园子里已经有挺多帖子了,但开发中发现认证未授权情况下返回的401状态码是没有任何信息的,业务中可能有需要返回一串错误的Json信息.在这里我分享一个自定义 ...

  4. Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案 （精髓）

    前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说 ...

  5. Mongodb查询提示com.MongoDB.MongoException: too much data for sort() with no index

    解决办法: 查询数据量太大,添加索引即可解决问题 通过scrapy爬行完数据后,通过db.wooyun.drops.ensureIndex({"datetime":1})

  6. Codeforces 177G2 Fibonacci Strings KMP 矩阵

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF117G2.html 题目传送门 - CF177G2 题意 定义斐波那契字符串如下: $s_1="a ...

  7. BZOJ1096 [ZJOI2007]仓库建设 动态规划 斜率优化

    原文链接http://www.cnblogs.com/zhouzhendong/p/8696410.html 题目传送门 - BZOJ1096 题意 给定两个序列$a,b,X$,现在划分$a$序列. ...

  8. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第十二集之FastDFS的使用】

    (自己的项目路径)相关项目在web部分中priv.lirenhe.fastdfs 官方提供一个fastdfs开发项目,下载下来maven install 以下内容是借鉴网上的一篇文章,但是不知道网址了 ...

  9. Practice| 面向对象

    实参与形参的传递机制 * 实参给形参赋值: * 1.基本数据类型: * 实参给形参的数据值,形参的修改和实参无关 * 2.引用数据类型 * 实参给形参的地址值,如果这个地址值修改“属性”会影响实参,但 ...

  10. sql取逗号前后数据与批量修改某一字段某一值

    sql取逗号后的值 SELECT SUBSTRING_INDEX(字段,) FROM 表名 sql取逗号前的值 SELECT SUBSTRING_INDEX(字段,) FROM 表名 批量修改 UPD ...