HTML5 总结-拖放-3
HTML5 拖放
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。
HTML5 拖放实例
下面的例子是一个简单的拖放实例：
实例
<!DOCTYPE HTML>
<html>
<head>
<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>
</head>
<body> <div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" /> </body>
</html>
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true" />
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释：
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目标元素）中
HTML5 总结-拖放-3的更多相关文章
- HTML5原生拖放实例分析
HTML5提供了原生拖放功能的JavaScript API,使用起来很方便. 兼容性: 对于PC端浏览器,Firefox.Chrome.Safari支持良好,而IE和Edge浏览器有些特性不支持,如I ...
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- HTML5 — 让拖放变的流行起来
先上 Demo,尽量用 chrome,代码可参考 Github. 在 HTML5 出现之前,页面元素的拖放需要监听 mousedown.mouseover 以及 mouseup 等一系列事件,然后改变 ...
- HTML5之拖放
- Draggable 标签 文件拖放 99年IE5开始,05后所有浏览器支持(除了opera) <li id=be draggable=true ondragstart="star ...
- HTML5 元素拖放
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5 原生拖放
前言: HTML5提供专门的拖拽与拖放的API,可以方便的指定某个元素可拖动,可以创建自定义的可拖动元素和放置目标 相关知识点: 1.拖放事件 拖放元素时,将依次触发下列事件 dragstart 按 ...
- 【HTML5】拖放（Drag 和 drop）
效果图: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 { ...
- HTML5的拖放事件
1.给标签添加属性draggable=ture即可允许拖放,有些标签可以不加,例如img有图片.a有url,默认拥有拖放功能 2.事件在被拖动元素上触发 ondragstart ondrag ondr ...
- HTML5 的拖放（实例：两个div之间拖放图片）
重点解释: 首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true : dataTransfer.setData() 方法设置被拖数据的数据类型和值: ondragover ...
随机推荐
- ECC（Error Checking and Correction）校验和纠错
ECC的全称是 Error Checking and Correction or Error correction Coding,是一种用于差错检测和修正的算法.上一节的BBM中我们提到过,NAND闪 ...
- Windows下如何建立以"."开头的文件夹
Windows资源管理器不允许创建点开头的文件或文件夹,但在cmd命令提示符下是可以的: 创建命令: md d:\.myfolder .myfolder就是以点开头的文件夹的名称
- Win7搭建Django开发环境
1.官网下载并安装python 2.7.5 2.配置python 环境变量 在Path中加入python安装目录: PATH=PATH;c:\python26 在PATHEXT中加入以下变量,可以直接 ...
- ios即时通讯客户端开发之－mac上基于XMPP的聊天客户端开发环境搭建
1.搭建服务器 - 安装顺序 - (mysql->openfire->spark) 数据库:mysql 服务器管理工具: openfire 测试工具: spark mysql 安装 h ...
- HTML5入门（一）
HTML简单介绍: HTML(HyperText Markup Language),超文本标记语言,是一种专门用于创建web的超文本文档编程语言,是我们看到的网页的源代码. 版本简介: 1997年推出 ...
- iOS 10 因苹果健康导致闪退 crash
如果在app中调用了苹果健康,iOS10中会出现闪退.控制台报出的原因是: Terminating app due to uncaught exception 'NSInvalidArgumentEx ...
- DataSet中取值（转）
1 DataSet.Table[0].Rows[ i ][ j ] 其中i 代表第 i 行数, j 代表第 j 列数 2 DataSet.Table[0].Rows[ i ].ItemArray[ j ...
- C++函数声明和定义深度解析
概述: 声明是将一个名称引入一个程序. 定义提供了一个实体在程序中的唯一描述. 声明在单个作用域内可以重复多次(类成员除外),定义在一个给定的作用域内只能出现一次. 一个定义就是一个声明,除非: 它定 ...
- windows 下提取目录下所有文件的文件名
tree D:/dir /f >D:/filenames.txt 提取D盘dir目录下所有文件名,写入文件filenames.txt
- 属性"XmlFileName"的代码生成失败
属性"XmlFileName"的代码生成失败.错误是:"未将对象引用设置到对象实例" 解决: 控件修改造成,关闭打开页面,重新生成