今天，给大家整理一个html5 拖放。

首先，我们先了解一下什么是拖放？

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

首先介绍一下里面用到的重点知识：

  1. DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
  2. draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：
  3. ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
  4. ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
  5. ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
  6. ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
  7. ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
  8. Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
  9. Event.effectAllowed 属性：就是拖拽的效果。

那现在 我们写一个简单的例子来 介绍一下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>

<style type="text/css">
#div1, #div2{
float:left;
width:198px;
height:66px;
margin:10px;
padding:10px;
border:1px solid #aaaaaa;
}
img{
width: 198px;
height: 66px;
}
</style>
<body>

//加入图片
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

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

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</html>

那我们现在来看一下具体的效果图。

这是我们用html做出来的效果图，下面我们开始拖动：

这是按住鼠标拖动的时候：

松开鼠标，便完成了我们本次的执行。

Powered by WordPress | Designed by zhangxinxu
Copyright© 2009-2017 张鑫旭-鑫空间-鑫生活
鄂ICP备09015569号

 

HTML5 中的拖放的更多相关文章

  1. HTML5中的拖放

    关于HTML5中的拖放 拖放(Drag 和 Drop)是一种常见的特性,即抓取对象以后拖到另一个位置,在 HTML5 中,拖放是标准的组成部分.在HTML5中用户可以使用鼠标选择一个可拖动元素,将元素 ...

  2. HTML5中的跨文档消息传递

    跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p. ...

  3. HTML5学习笔记 拖放

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

  4. HTML5中引入的关键特性

    新特性 描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容.不指定变化后的内容如何保存 contextme ...

  5. HTML5新增的拖放API---（一）

    HTML5新增了关于拖放的API,通过API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互的界面. 拖放操作可以分为两个动作:在某个元素上按下鼠标移动鼠标(没有 ...

  6. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  7. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  8. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  9. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

随机推荐

  1. 手把手教你学SVN

    注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/6822713.html  ) 作者:wangwen896 整理 对于很多新手来说,SVN 代码托管一无所 ...

  2. AngularJs 常用的过滤器

    date格式化 {{ 1304375948024 | date }}             //结果:May 3, 2011 {{ 1304375948024 | date:"MM/dd/ ...

  3. vue2.0结合Element实现select动态控制input禁用

    今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得 ...

  4. hdu2196Computer 树形DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2196 思路: 一看就是一道树形DP的题目,对于一个节点来说,到它的最远距离的路径可能来于子树,也可能来 ...

  5. git学习笔记之二 -- git分支

    前面对git基础作了简单的总结,这次对git的杀手锏--分支做一总结. Git分支简介 几乎每个版本控制系统都以某种形式支持分支,可以使你的工作从开发主线上分离开来,以免影响开发主线.很多版本控制系统 ...

  6. 合成(composite)模式

    合成模式属于对象的结构模式,有时又叫做“部分——整体”模式.合成模式将对象组织到树结构中,可以用来描述整体与部分的关系.合成模式可以使客户端将单纯元素与复合元素同等看待. 合成模式 合成模式把部分和整 ...

  7. PreparedStatement/Statement处理insert update等操作时乱码，以及URL

    原文: 在顶目中无意中碰到PreparedStatement 在存DB时出现乱码,困扰了好久终于解决问题 问题代码如下 ps = con.prepareStatement(INSERT_SQL); p ...

  8. SmartCoder每日站立会议04

    1.站立会议内容 经过今天的站立会议,决定首页先做成简单的样式,先完善功能.进行了首页模块划分. 站立会议照片: 2.任务展板    3.燃尽图    

  9. 重构了cxlt-vue2-toastr插件

    距离上篇文章已经过去一个多月了,期间有很多想法,但时间真不是想挤就能挤出来的.其实这段时间我就做了一件事,一个小程序的项目,已上线半月有余,也迭代了几个版本,现在还在不断完善. 先说点题外话,我们做了 ...

  10. jmeter 环境部署、数据库设置、分布式设置、多网卡配置等随笔

    <!-- linux系统修改系统环境变量  系统语言-->[root@web-249 ~]# env|grep LANGLANG=zh_CN.UTF-8[root@web-249 ~]# ...