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, ...
随机推荐
- BETA准备
过去存在的问题 文档问题 未能事先做好设计文档,且小程序与后端数据库接口存在问题 界面问题 原型图设计花的时间较少,小程序设计界面仍相对粗糙,前端成员css元素应用经验不足 小程序界面之间对接存在问题 ...
- C# 之 数字格式化
格式规范的完整形式:{index [,width][:formatstring]} index是此格式程序引用的格式字符串之后的参数,从零开始计数:width(可选) 是要设置格式的字段的宽度,wid ...
- 企业级代码托管Gitlab
Gitlab概述: 一个利用Ruby on Rails开发的开元应用程序,从而实现一个代码托管项目仓库,可以通过web界面进行访问公开的或者私有的项目 Ruby on Rails是一个可以使开发,部署 ...
- hibnet 自动生成表格
在pom文件中添加相关的依赖 在application.yml文件中添加配置信息 新建实体类Boy 项目运行,mysql就产生了一个boy表. 需要注意的是:当配置文件ddl-auto: create ...
- 51Nod1306 高楼和棋子 动态规划
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1306.html 题目传送门 - 51Nod1306 题意 有个N层的高楼和若干个棋子,所有的棋子都是 ...
- 02. Pandas 1|数据结构Series、Dataframe
1."一维数组"Series Pandas数据结构Series:基本概念及创建 s.index . s.values # Series 数据结构 # Series 是带有标签的一 ...
- jquery开发插件提供的几种方法
http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html
- springcloud(六)：配置中心git示例
随着线上项目变的日益庞大,每个项目都散落着各种配置文件,如果采用分布式的开发模式,需要的配置文件随着服务增加而不断增多.某一个基础服务信息变更,都会引起一系列的更新和重启,运维苦不堪言也容易出错.配置 ...
- mysql底层原理
1.索引底层数据结构B+Tree详解 索引的本质 索引是帮助MySQL高效获取数据的排好序的数据结构 索引存储在文件里 索引的结构 二叉树 (红黑树[平衡二叉树]).HASH.BTREE[多叉树] 索 ...
- switch反汇编
以下总结为debug模式