【HTML5】网页元素的拖放操作
拖放介绍
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。虽然在HTML5之前已经可以使用 mousedown,mousemove,mouseup 实现拖放,但是只支持在浏览器内部的拖放,在HTML5中,拖放是标准的一部分,任何元素都能够拖放,并且支持浏览器与其他应用程序之间的数据的互相拖放,同时大大简化了拖放方面的相关代码。
拖放实现步骤
1、将想要拖放的对象元素的 draggable 属性设为true,注意: img 与 a 元素默认允许拖放。
2、编写与拖放相关的事件处理代码。
拖放事件
拖动事件:
- dragstart
鼠标按下并开始移动时触发,此时光标变成了“不能放”符号(圆环中有一条反斜线),表示不能把元素放到自己上面。 - drag
鼠标拖拽过程中触发,并且在元素被拖动期间会持续触发该事件(类似mousemove事件)。 - dragend
无论是把元素放到了有效的放置目标,还是回到原位,当拖放停止时都会触发该事件。
放置事件:
- dragenter
只要有元素被拖动到放置目标上,就会触发该事件(类似mourseover事件)。 - dragleave
只要元素被拖出了放置目标,就会触发该事件。 - dragover
只要被拖动的元素还在放置目标的范围内移动时,就会持续触发该事件。
需要注意的是,HTML页面的某些元素默认情况下不允许进行拖放,称之为HTML页面的默认行为。我们需要重写dragover事件,阻止事件的默认行为,将其变成有效的放置目标。
$('.content').on('dragover',function(event){event.originalEvent.preventDefault();
});
- drop
将拖动元素放置到目标元素上的时候会触发该事件。
拖放事件生命周期:
当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发:
dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend
数据交互(DataTransfer对象)
在拖放操作时实现数据交换是事件对象的一个属性,用于从被拖拽元素向放置目标传递字符串格式的数据。因为它是事件对象的属性,所以只能在拖放事件的事件处理程序中访问 dataTransfer 对象,并通过 event.dataTransfer 来获取DataTransfer实例。
dataTransfer对象的方法:
- setData(key,val): 设置拖拽元素数据,在dragstart事件中使用。
- getData(key): 获取设置的数据,在drop事件中使用。
- clearData(): 删除指定格式的数据。仅在dragstart事件中调用,在其他事件中调用会抛出异常。
- setDragImage(): 指定一幅图像,当拖放发生的时候,显示在光标下方(实际操作中基本不用)。
dataTransfer对象的属性:
dropEffect: 用于设置目标元素将执行的操作,表示实际拖放时的视觉效果。
effectAllowed: 与dropEffect属性一起使用,设定拖放时的视觉效果。
types: 数据类型为DOMStringList,存储DataTransfer对象中所有数据项的数据类型。
items: 数据类型为DataTransferItemList,存储DataTransfer对象中所有的数据项。
学完了拖放的基础知识,下面我们来写一个简单的HTML代码来执行一下拖放操作。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拖放</title><style>.outer{height: 150px;border: 1px solid red;margin: 10px;}.inner{width: 100px;height: 100px;border: 1px solid blue;float: left;margin: 10px;}</style><script>window.onload = function(){var outer = document.getElementsByClassName('outer')var inner = document.getElementsByClassName('inner')inner = Array.from(inner)outer = Array.from(outer)inner.forEach(function(item){//变成可拖拽元素item.draggable = trueitem.ondragstart = dragstart});outer.forEach(function(item){item.ondragover = dragoveritem.ondrop = drop})// 拖拽开始function dragstart(event){event.dataTransfer.setData('id',this.id)}function dragover(event){// 阻止默认行为,变成可放置的event.preventDefault()}function drop(event){var oid = event.dataTransfer.getData('id')var dom = document.getElementById(oid)this.append(dom)}}</script>
</head>
<body><div class="outer"></div><div class="outer"></div><div class="inner" id="one"></div><div class="inner" id="two"></div><div class="inner" id="three"></div>
</body>
</html>
【HTML5】网页元素的拖放操作相关推荐
- 在线拖拽html,html5拖曳操作 HTML5实现网页元素的拖放操作
HTML5之前,要实现网页元素的拖放操作,需要依靠mousedown.mousemove.mouseup等API,通过大量的JS代码来实现:HTML5中引入了直接支持拖放操作的API,大大简化了网页元 ...
- class 第一个元素_第二章(第3节):网页元素定位和操作
大家仔细思考一下,我们用 selenium 操控浏览器是什么意思,其实就是用 selenium 模拟人上网,也就是说人用浏览器能做的任何事情,我们用 selenium 都可以做,selenium 就如 ...
- HTML5 DOM元素类名相关操作API classList简介(转载自张鑫旭大神)
一.其实事情的发展就像切水果 如果我们把元素的类名操作比作"切水果"游戏的话,其中一个单独的类名就好比"水果"或"炸弹"! DOM Leve ...
- HTML5 DOM元素类名相关操作API classList简介
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3483 一.其实事情 ...
- Jquery网页元素里面的操作以及JSON
如果网页里面有复选框,下拉列表Jquery怎么来操作,主要是怎么选取数据,就是取选中值,第二个是设置哪一项选中 <script src="jquery-1.11.2.min.js&qu ...
- 25+ 个 jQuery 网页拖放操作的插件
这篇文章为你介绍27个jQuery插件,使得你的Web前端具备拖放操作的能力. Ajax Upload 提供文件拖放上传,并显示上传进度 Drop n' Save – Drag & Drop ...
- HTML5新增的结构元素和网页元素
1.什么是HTML5 HTML5是用于取代HTML和XHTML的标准版本 新特性: 新的语义化标签,比如header.footer.nav 新的表单控件,比如email.url.search 用于绘画 ...
- html5网页怎么实现内容追加,纯js实现网页内容复制后自动追加自定义内容
网页操作内容复制内容后纯js实现监听自动追加自定义内容 不少网站技术或者博客上有这样的处理,当我们复制代码的时候,会自动加上一段本信息版权为XXXX,这是怎么实现的呢? 其实实现的方式很简单,可以在我 ...
- HTML5原生拖拽/拖放 Drag Drop 详解
转载自:juejin.im/post/5a169d- 前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准 ...
最新文章
- 如何检查JavaScript中的数字是否为NaN?
- centos 6.2用yum安装中文输入法
- 首个64层3D NAND闪存技术出现
- as与c++的反射机制对比
- ServletContext接口
- 新版本idea的run/debug configuration
- 交换两个数不是三个数。
- 查看MySQL数据库大小
- java 状态常量_Java 变量和常量
- 校园网络登陆显示通信服务器异常,校园网络监控技术方案设计.docx
- 常见Cron表达式表达式生成器
- 2021中国科学院文献情报中心期刊分区表 计算机
- 将数组分成两部分,使得这两部分的和的差最小
- k折交叉验证优缺点_为什么要用交叉验证
- 微信小程序开发博客项目-篇幅《一》
- linux用户态切换到内核态方法
- vue-sytle样式抽离
- 曾经跨过山和大海的百度AI技术汇,跨进北工大!
- LTSPICE使用教程:入门指导
- 内部环境--SWOT分析法
热门文章
- SpringBoot2 Redis连接池
- 一年月份大小月口诀_怀胎十月,为啥我只能算出9个月?
- Self Attention和Multi-Head Attention的原理和实现
- hibernate VS mybatis
- mybatis+Druid连接池的问题
- 千兆网线制作(包括交叉线)
- uni-app 图片适配 动态计算图片高度
- Java中对数组的排序方法总汇分析
- Java Jvm虚拟机的内存模型概述 《对Java的分析总结》(一)
- ORA-12519: TNS:no appropriate service handler found 解决方法