拖放,就是抓取一个对象后拖放到另一个位置。很常用的一个功能,在还没有html5的时候,我们实现这个功能,通常会用大量的js代码,再利用mousemove,mouseup等鼠标事件来实现,总的来说比较麻烦。在html5中,引入了可以直接进行拖放的api,大大简化了我们的操作。

浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释:在 Safari 5.1.2 中不支持拖放。

如何实现
接下来用个实例来总结一下拖放的几个步骤:
第一步:设置元素为可拖放
利用draggable="true"设置元素为可拖放。
比如这样:
<img src="" draggable="true">
或这样
<div draggable="true">haha</div>

第二步:拖动开始和设置拖动数据-ondragstart和setData
在一个元素中,ondragstart属性会调用一个函数,这个函数定义了被拖动的数据,dataTransfer.setData()方法设置了
被拖数据的数据类型和值,数据类型可自己设置(即下面代码中的“Text”)。值即被拖数据的id,所以拖动元素和被放置
元素均需设置id。
如下:
<div id="div2" draggable="true" ondragstart="drag(event)" style="border:1px red solid;width: 200px;height:100px;">hahahhahhahahahaha</div>
function drag(ev){
      ev.dataTransfer.setData("Text",ev.target.id);
}
第三步:放在何处-ondragover
ondragover规定被拖动的数据放置在何处。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式,在这里,调用 preventDefault() 来避免浏览器对
数据的默认处理。
<div id="div1" ondragover="allowDrop(event)" style="border:1px green solid;width: 300px;height:250px;"></div>
 function allowDrop(ev){
        ev.preventDefault();
}
第四步:进行放置-ondrop
当放置被拖数据时,会发生ondrop 事件。ondrop会调用一个函数。
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px green solid;width: 300px;height:250px;"></div>
function drop(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("dd");
        ev.target.appendChild(document.getElementById(data));
}
上面代码中getData()方法里的数据类型必须与setData()里定义的数据类型一致。
全部代码如下:
<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8"/>
    <title></title>
  </head>
  <body>
      <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px green solid;width: 300px;height:250px;"></div>
      <img id="div3" src="QQ图片20150925120406.jpg" draggable="true" ondragstart="drag(event)" style="border:1px red solid;width: 200px;height:100px;">
      <div id="div2" draggable="true" ondragstart="drag(event)" style="border:1px red solid;width: 200px;height:100px;">hahahhahhahahahaha</div>
   </body>
   <script>
     function allowDrop(ev){
        ev.preventDefault();
     }
     function drag(ev){
      ev.dataTransfer.setData("dd",ev.target.id);
     }
     function drop(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("dd");
        ev.target.appendChild(document.getElementById(data));
     }
   </script>

拖放(Drag和Drop)--html5的更多相关文章

  1. HTML5 之拖放(drag与drop)

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

  2. HTML5 拖放---drag和drop

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

  3. HTML 5 拖放(Drag 和drop)

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

  4. Android开发者指南-用户界面-拖放-Drag and Drop[原创译文]

      英文原文:http://developer.android.com/guide/topics/ui/drag-drop.html 版本:Android 4.0 r1 译者注:黄色底色为未决译文 快 ...

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

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

  6. HTML5 拖放(Drag 和 Drop)功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

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

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

  8. HTML5 拖放(Drag 和 Drop)详解与实例

    简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaSc ...

  9. HTML5 拖放(Drag 和 Drop)详解与实例(转)

    公司要开一个技术分享会,给我们出了几个简单的题去实现,其中有如何实现表格中列之间的拖拽,我知道html5中有个新方法可以实现,但是没有认真学习,现在闲了去学学,发现关于drag和drop的文章有很多, ...

随机推荐

  1. 四、ABP 学习系列 - 配置Swagger

    一.再XX.Web项目中用Nuget安装Swashbuckle.AspNetCore.SwaggerGen和Swashbuckle.AspNetCore.SwaggerUI 二.在Startup.cs ...

  2. Xcode工具特性

    1.注释 #pragma mark 注释说明#pragma mark - 分类/分组注释说明 2.自定义代码块. 3.多文本编辑框 View>>Assistant Editor

  3. POJ3249(DAG上的dfs)

    Test for Job Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 10567   Accepted: 2482 Des ...

  4. Log4j配置记录(特定java包/类的日志级别控制)

    最近使用log4j,关于日志级别的如何配置生效百思不得其解,花了些时间,误打误撞终于整了,记录一下,备忘. 注意: 1.图中的2(log4j.logger.com.taobao)限制级别最高,它直接指 ...

  5. maven学习7 settings.xml解析

    maven的配置文件settings.xml存在于两个地方: 1.安装的地方:${M2_HOME}/conf/settings.xml 2.用户的目录:${user.home}/.m2/setting ...

  6. Identity4 Clientcredentials 自定义客户端授权验证

    看了许多教程 ,大多数都是提前定义好客户端,但是这样有个弊端,我们并不知道以后会有多少客户端.有可能从数据库读取数据,也有可能通过json文件获取,总之 各种方式. 然后 网上大多数教程都是提前定义好 ...

  7. Python函数(三)-局部变量

    全局变量 全局变量在函数中能直接访问 # -*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" name = 'John' def te ...

  8. Vue指令学习

    # new Vue({ vue所有的数据都是放到data里面的 # data:{ vue对象的数据 # a:1,对象 # b:[] , # } # methods:{vue对象的方法 # dosomt ...

  9. Mysql 不存在则插入,存在则更新

    )) BEGIN ) ; END 开始写了一大堆的代码来实现,原来还有这种方法,惊讶~~~ 如果不存在,就插入一条数据:如果存在,更新某个字段. on duplicate key update: my ...

  10. DAY10-MYSQL库操作

    一 系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等performance_schema: MyS ...