HTML5: HTML5 拖放
| ylbtech-HTML5: HTML5 拖放 |
| 1.返回顶部 |
HTML5 拖放（Drag 和 Drop）
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
将 RUNOOB.COM 图标拖动到矩形框中。
拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
注意:Safari 5.1.2不支持拖动.
HTML5 拖放实例
下面的例子是一个简单的拖放实例：
实例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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> <p>拖动 RUNOOB.COM 图片到矩形框中:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body>
</html>
它看上去也许有些复杂，不过我们可以分别研究拖放事件的不同部分。
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释：
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目标元素）中
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 6.返回顶部 |
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
HTML5: HTML5 拖放的更多相关文章
- 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 总结-拖放-3
HTML5 拖放 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 ...
- 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 ...
随机推荐
- junit中配置log4j日志
在对项目单元测试的时候,有时候会使用log4j来打印日志,这个时候需要对log4j进行配置. 声明和继承SpringJUnit4ClassRunner类,在这个类中对log4j的配置文件进行加载. p ...
- 2018-2019 2 20165203 《网络对抗技术》Exp9 Web安全基础
2018-2019 2 20165203 <网络对抗技术>Exp9 Web安全基础 实验要求 本实践的目标理解常用网络攻击技术的基本原理,做不少于7个题目,共3.5分.包括(SQL,XSS ...
- Html代码查看器
Html代码查看器 效果: 分析: 1.连接网络需要权限 <uses-permission android:name="android.permission.INTERNET" ...
- 做Data Mining，其实大部分时间都花在清洗数据
做Data Mining,其实大部分时间都花在清洗数据 时间 2016-12-12 18:45:50 51CTO 原文 http://bigdata.51cto.com/art/201612/52 ...
- codeforces gym100418J
题目简述 给定N 求1到N中有多少个幸运数字 幸运数字的定义为 这个数能被它二进制表示下1的个数整除 其中(1 ≤ N ≤ 1019) -------------------------------- ...
- 117、TensorFlow变量共享
# sharing variables # Tensorflow supports two ways of sharing variables # 1.Explicitly passing tf.Va ...
- HTML的head头和标题
HTML中Head头 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- VC6.0在Win8，10下的兼容性调整
Microsoft Visual C++ 6.0,简称VC6.0,是微软推出的一款C++编译器,将“高级语言”翻译为“机器语言(低级语言)”的程 序.Visual C++是一个功能强大的可视化软件开发 ...
- C++中采用操作符重载完善复数类
1,复数类应该具有的操作: 1,运算:+,-,*,/: 2,比较:==,!=: 3,赋值:=: 4,求模:modulus: (5),完善的复数类操作符重载必不可少: 2,利用操作符重载: 1,统一复数 ...
- Codeforces 1114D(区间DP）
题面 传送门 分析 法1(区间DP): 首先,我们可以把连续的相等区间缩成一个数,用unique来实现,不影响结果 {1,2,2,3,3,3,5,3,4}->{1,2,3,5,3,4} 先从一个 ...