拖放，就是抓取一个对象后拖放到另一个位置。很常用的一个功能，在还没有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. 把python2.6升级到python2.7（同样适用于把python2升级到python3）

    在启用https过程中,在生成CSR(证书请求文件)时,报错了,说python2.6已被python团队抛弃了,所以升级python到2.7 话不多说,直接上代码: 步骤1:下载python2.7.1 ...

  2. SQL简单嵌套查询与非嵌套查询的比较(MSSQL2005)

    某天的工作是修复某个项目的bug,接着就发现,其sql极其混乱,有非常多的left join和in操作,还有嵌套查询(只有一个表的嵌套查询).不知道看到过哪里的资料说,嵌套查询速度慢,于是我把全部嵌套 ...

  3. Order By操作

    本文转载自:http://www.cnblogs.com/vingi/articles/2450482.html 适用场景:对查询出的语句进行排序,比如按时间排序等等. 说明:按指定表达式对集合排序: ...

  4. 第15届浙江省赛 D Sequence Swapping(dp)

    Sequence Swapping Time Limit: 1 Second      Memory Limit: 65536 KB BaoBao has just found a strange s ...

  5. sql server将字符串转换为 uniqueidentifier 时失败

    sql server查询中出现 将字符串转换为 uniqueidentifier 时失败异常 原因为id设置为uniqueidentifier 字段,在where查询时需要做转换cast(id as ...

  6. Intellij IDEA 发布后的项目在哪里

    Intellij IDEA 中使用 tomcat 并发布项目后,项目并没有出现在在 webapps 文件夹中,如果没有手动修改过部署目录的话,idea的真实部署目录为 File---->Proj ...

  7. 开发环境入门 linux基础 （部分）awk 赋值变量 if

    awk 常用于处理格式非常明显的文件 awk -F: '{print $1}' /etc/passwd  含义:取冒号分隔符的第一段内容 $0 指取所有! NF 指有几段内容 $NF 取最后一段内容 ...

  8. 重新认识synchronized（下）

    synchronized既保证原子性,又保证内存可见性,是一种线程同步的方式,是锁机制的一种java实现.synchronized的实现基于JVM底层,JVM是基于monitor实现的,而monito ...

  9. spring 框架整合

    struts hibernate spring 先贴出框架整合需要的maven <project xmlns="http://maven.apache.org/POM/4.0.0&qu ...

  10. python 继承进阶

    继承进阶 面向对象 1.类:具有相同属性和方法 的一类事物 类名可以实例化一个对象 类名可以调用类属性,(静态属性 和(方法)动态属性) 2.对象:也就是实例    对象名:调用对象属性 调用方法 3 ...