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, ...
随机推荐
- yum安装mongodb
1.创建mongodb.repo文件 在/etc/yum.repos.d/目录下创建文件mongodb.repo,它包含MongoDB仓库的配置信息,内容如下: 复制代码代码如下: [mongodb] ...
- mzf的考验
题解: 比较水吧 显然是平衡树的操作 然后就是写写写 用对拍来查错相比之下直接样例查还是比较容易的 刚开始没有优化常数没开O2就变成暴力分了smg 开了O2就a了 代码: #include <b ...
- python之logging
1.简单使用 # CRITICAL, ERROR, WARNING, INFO, DEBUG) cewid import logging logging.basicConfig(level=loggi ...
- awk命令的用法实战
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAn8AAADvCAIAAAAM1SXGAAAgAElEQVR4nO2dz8s125XXHx9oTXMHUZ
- 强大的图片展示插件,JQuery图片预览展示插件
只需要引入JQuery.js , viewer.css 和 viewer.js <!DOCTYPE html> <html lang="en"> <h ...
- BroadcastReceiver插件化解决方案
--摘自<android插件化开发指南> 1.静态广播和动态广播仅区别于注册方式的不同.静态广播的注册信息保存在PMS中,动态广播的注册信息保存在AMS中 2.发送广播,也就是Contex ...
- BroadcastReceiver工作原理
--摘自<android插件化开发指南> 1.动态注册过程是注册Receiver并通知AMS,发送内容包括IntentFilter.一个实现了IIntentReceiver接口的Binde ...
- Sunscreen POJ - 3614（贪心）
To avoid unsightly burns while tanning, each of the C (1 ≤ C ≤ 2500) cows must cover her hide with s ...
- ZOJ 1940 Dungeon Master【三维BFS】
<题目链接> 题目大意: 在一个立体迷宫中,问你从起点走到终点的最少步数. 解题分析: 与普通的BFS基本类似,只需要给数组多加一维,并且走的时候多加 上.下这两个方向就行. #inclu ...
- POJ 1258 Agri-Net 【Prime】模板题
题目链接>>> 题目大意: 给你N*N矩阵,表示N个村庄之间的距离.FJ要把N个村庄全都连接起来,求连接的最短距离(即求最小生成树).解析如下: #include <c ...