今天，给大家整理一个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. 【Netty】Netty核心组件介绍

    一.前言 前篇博文体验了Netty的第一个示例,下面接着学习Netty的组件和其设计. 二.核心组件 2.1. Channel.EventLoop和ChannelFuture Netty中的核心组件包 ...

  2. java泛型探索——介绍篇

    1. 泛型出现前后代码对比 先来看看泛型出现前,代码是这么写的: List words = new ArrayList(); words.add("Hello "); words. ...

  3. jQuery选择器的优点

    jQuery选择器的优点 相信小伙伴们对选择器并不陌生,从css1到css3的选择器有很多,但是JQuery都能完美的支持,而且API操作起来也特别方便好用,在很大程度上精简了代码,节约了很多性能.那 ...

  4. NSA Fuzzbunch分析与利用案例

    Shadow Brokers泄露出一份震惊世界的机密文档,其中包含了多个 Windows 远程漏洞利用工具.本文主要介绍了其中一款工具Fuzzbunch的分析与利用案例 1 整体目录介绍 解压EQGR ...

  5. Collection学习目录

    1.Collection<E>.Iterable<T>和Iterator<E>接口 2.ArrayList源码分析 3.LinkedList源码解析 4.Vecto ...

  6. 使用Java语言开发微信公众平台(七)——音乐消息的回复

    在上一节课程中,我们学习了图片消息的回复功能.根据微信公众平台的消息类型显示,微信共支持文本.图片.语音.视频.音乐.图文等6种消息类型的回复: 其中,我们已经实现了文本.图文.图片等消息的回复处理, ...

  7. Python3.5 在Ubuntu16.04上无法画图的解决方案

    1. 问题由来 在使用下面的测试代码学习python时,用Pycharm画不出来图像,SPYDER3 可以画出来. 下面的代码来自:http://old.sebug.net/ # -*- coding ...

  8. Ultimus BPM 通信和运营商行业应用解决方案

    Ultimus BPM 通信和运营商行业应用解决方案 行业应用需求 电信运营商的主要职能是维护庞大的通信网络和向电信用户提供固话通讯.手机通讯.数据通讯及相关的附加增值服务,其组织特点是工种多.分工细 ...

  9. 使用Android studio作按键切换界面

    一.新建工程 二.新建一个按键             android:layout_width="wrap_content"         android:layout_hei ...

  10. nginx+tomcat+session共享(转)

    1 起因   最近对新开发的web系统进行了压力测试,发现tomcat默认配置下压到600人的并发登录首页响应速度就有比较严重的影响,一轮出现2000多个的 500和502错误.我把登录的时间统计做了 ...