拖放，就是抓取一个对象后拖放到另一个位置。很常用的一个功能，在还没有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. hihoCoder#1139(二分+bfs)

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在上一回和上上回里我们知道Nettle在玩<艦これ>,Nettle在整理好舰队之后终于准备出海捞船和敌军交战了 ...

  2. 得到properties配置文件内容

    代码: 1.配置文件内容 2.文件所在项目中位置: 3.java代码: 01.得到键值对: @Test public void getProp() { Properties prop = new Pr ...

  3. Fork/Join框架介绍

    转http://www.infoq.com/cn/articles/fork-join-introduction/ 1. 什么是Fork/Join框架 Fork/Join框架是Java7提供了的一个用 ...

  4. __cdecl & __stdcall calling conventions

    (一) __cdecl: c declaration C语言默认的函数调用方法:所有参数从右到左依次入栈,这些参数由调用者清除,称为手动清栈.C/C++默认的调用方式,可用于函数参数不确定的情况下. ...

  5. c# 设置水印，消除水印

    方案1: 图像处理 opencv etc 方案2: 开源框架,直接使用,已经优化 https://github.com/itext/itextsharp https://github.com/itex ...

  6. C++11 auto和decltype推导规则

    VS2015下测试: decltype: class Foo {}; int &func_int_r(void) { int i = 0; return i; }; int && ...

  7. 基于Flask框架的Python web程序的开发实战 <二> 项目组织结构

    看到第七章-大型程序的结构,备受打击,搞不清工厂函数.蓝本.单元测试,不理解这些对象/变量怎么传递的,感觉好乱,虽然按照源码都照抄了,还是不理解.... 缓缓先.... 本来网上的Flask的教程就比 ...

  8. Mediaplayer

    Mediaplayer报错 prepareAsync called in state 1     是因为在setDataSource之前调用了prepare.因为setDataSource放到了线程里 ...

  9. MySQL存储引擎 -- MyISAM 与 InnoDB 实现

    一.MyISAM索引实现MyISAM引擎使用B树作为索引结构,叶节点的data域存放的是数据记录的地址. MyISAM主键索引这里设表一共有三列,假设我们以Col1为主键,Col2为辅助索引.则下图是 ...

  10. NULL、0、nullptr

    C的NULL 在C语言中,我们使用NULL表示空指针,也就是我们可以写如下代码: int *i = NULL;foo_t *f = NULL; 实际上在C语言中,NULL通常被定义为如下: #defi ...