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, ...
随机推荐
- Linux-GLIBCXX版本过低导致编译错误--version `GLIBCXX_3.4.20' not found
最近在CentOS6.2上安装protobuf2.4.1,编译的时候出现如下错误: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not fo ...
- nodeJS有多快
听说nodeJS适用于高并发的场景,一直想测试但是没找到机会 这几天新系统要上线了,老系统的数据需要割接到新的系统中 由于数据量很大,表的结构的发生了很大的改变,割接时间长达9个小时 其中一个模块有1 ...
- day5.python列表练习题
写代码,有如下列表,按照要求实现每一个功能 li = [“alex”, “WuSir”, “ritian”, “barry”, “wenzhou”] 1.计算列表的长度并输出 print(len(li ...
- 大数据-kafka
1Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据. 作用:1发布和订阅消息流,这个功能类似于消息队列,这也是kafka归类为消息队列框架的原因 2以容错 ...
- HtmlTestRunner
1.一般生成报告时,会使用时间来作为报告名称的一部分,引入time这个第三方,使用以下方式格式化当前时间 下面运行最终结果:2019-03-29-14_29_18------>年-月-日-时-分 ...
- YII框架增删改查常用语句
//实例化db $db = new \yii\db\Query(); //插入 $db->createCommand()->insert('user', [ 'name' => 't ...
- JDK5的新特性之可变参数&Arrays.asList()方法
[代码] package com.hxl; import java.util.Arrays; import java.util.List; public class Test { public sta ...
- day32 process模块用法
昨日作业: 服务端: 服务端: from socket import * from multiprocessing import Process def server(ip,port): server ...
- thinkphp模板继承
public/base.html <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Java 之 OOAD
1.UML a.全称:统一建模语言 b.UML图:流程图.用例图.时序图.类图 c.接口与类之间——实现 d.对象与对象之间 ①泛化——在UML中不叫继承,而叫泛化 ②关联 依赖:use a 是一种弱 ...