HTML5 学习05—— 拖放（Drag 和 Drop）
拖放（Drag 和 drop）是 HTML5 标准的组成部分。即抓取对象以后拖到另一个位置。
例：将w3cschool图标拖动到矩形框中。
<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> <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>
步骤如下：
（1）设置元素为可拖放
使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
（2）拖动什么 - ondragstart 和 setData()
ondragstart 属性：调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法：设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
解析：数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
（3）放到何处 - ondragover
ondragover 事件：规定在何处放置被拖动的数据。
（默认）无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
（4）进行放置 - 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 学习05—— 拖放（Drag 和 Drop）的更多相关文章
- HTML5学习笔记 拖放
拖放(Drag和drop)是html5标准的组成部分 拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素可拖 ...
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- HTML5（四）Drag and Drop
HTML5 拖放(Drag 和 Drop) 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素 ...
- 拖放(Drag和Drop)--html5
拖放,就是抓取一个对象后拖放到另一个位置.很常用的一个功能,在还没有html5的时候,我们实现这个功能,通常会用大量的js代码,再利用mousemove,mouseup等鼠标事件来实现,总的来说比较麻 ...
- HTML5 拖放---drag和drop
拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true: 例:<div id="div" draggable="true"&g ...
- HTML5拖拽/拖放(drag & drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...
- 在Blazor中实现拖放(drag and drop)
前言 我在实现一个含有待办列表功能的页面时,发现了一个好看的设计,它将待办分为--"待办","正在进行",和"已完成"三种状态,并且将待办通 ...
- HTML 5 拖放(Drag 和drop)
浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把标签 draggable 属性设置为 true. 2.向标签添加on ...
- HTML5学习之拖放（十）
l元素可以用于拖拽必须设置draggable="true"属性,img和a标签除外,她们两个默认就可以被拖拽 想做拖拽处理,就需要在Dom元素上监听拖放的事件:dragstart, ...
随机推荐
- 在启用了“编辑并继续”时，修改包含 lambda 表达式的“method”将会阻止调试会话继续进行
将所有的引用的“复制到本地”属性都设置成false就可以了
- Python_列表常用操作
%d 数字 %f 浮点 %s 字符串 字符串常用功能: .strip() 默认去掉字符串两边空格#或者在括号里注明去除什么 查看列表方法:dir(列表名) .append(元素): ...
- redis 配置命令
Redis:是一个key/v 型数据 是nosql的一种 CAP 理论: C:多个数据节点上的数据一致: A:用户发出请求后的有限时间范围内返回结果: P:network partition,网络发 ...
- AtCoder Regular Contest 102 (ARC102) D All Your Paths are Different Lengths 构造
原文链接https://www.cnblogs.com/zhouzhendong/p/ARC102D.html 题目传送门 - ARC102D 题意 给定 $L$,请你构造一个节点个数为 $n$ ,边 ...
- MarkdownPad 2在win10上安装及破解（含安装包）
MarkdownPad 2 是一款较不错的Markdown编辑器,可快速将文本转换为美观的HTML/XHTML的网页格式代码,且操作方便,用户可以通过键盘快捷键和工具栏按钮来使用或者移除Markdow ...
- 爬虫3 requests基础之下载图片用content(二进制内容)
res = requests.get('http://soso3.gtimg.cn/sosopic/0/11129365531347748413/640') # print(res.content) ...
- 搭建JMETER+ANT自动化接口测试环境步骤（一）
一.环境准备: 1.JDK 下载 地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html ...
- SQL-内连接、外连接(左、右)、交叉连接
本文测试基于以下两个表,student(左) \ teacher(右),使用数据库MariaDB,图形化界面HeidiSQL. 连接查询的概念:根据两个表或多个表的列之间的关系,从这些表中查询数据,即 ...
- MySQL安装目录修改
- Xamarin Essentials教程检查网络连通性Connectivity
Xamarin Essentials教程检查网络连通性Connectivity 网络连通性其实就是检测当前设备有没有连接网络.网络连通性在很多与网络相关的应用程序中会使用到.在Xamarin中如果 ...