【前端】【H5 API】拽托
拖曳操作需要借助于鼠标来实现，如文件或图片的移动操作等。在开发中，我们经常使用原生的JavaScript来实现拖曳效果，实现起来比较复杂。因此，HTML5为我们提供了更好用的接口或者事件，在很大程度上简化了页面中拖曳交互的实现难度。
图片和链接默认是可以拖动的，它们不用添加draggable属性。
一个完整的拖曳效果由拖曳（Drag）和释放（Drop）组成的。
在拖曳操作中，被拖动的元素称之为源对象，它指的是页面中设置了draggable="true"属性的元素；
源对象进入的元素称之为目标元素，目标元素可以是页面中的任一元素
拖曳元素的事件
| 事件 | 事件描述 |
|---|---|
| ondragstart | 当拖曳开始时触发 |
| ondrag | 作用于整个拖曳过程，ondrag事件表示在拖曳元素被拖动过程中会触发的事件。此时，鼠标可能在移动也可能未移动。 |
| ondragend | 当拖曳结束时触发 |
目标元素相关的事件
| 事件 | 事件描述 |
|---|---|
| ondragenter | 当源对象进入目标元素时触发 |
| ondragover | 当源对象悬停在目标元素上方时触发 |
| ondragleave | 当源对象离开目标元素时触发 |
| ondrop | 当源对象在目标元素上方释放鼠标时触发 |
只有当源对象上的鼠标点进入目标元素时，才会触发ondragenter事件。
默认情况下，浏览器会默认阻止ondrop事件，如果想要触发该事件,则需要在ondragover事件中使用“return false;”
（或者e.preventDefault()）来阻止其默认行为
拽托实例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
}
div:nth-child(2) {
border: 1px solid green;
}
div:nth-child(3) {
border: 1px solid blue;
}
p {
height: 25px;
background-color: pink;
line-height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1" draggable="true">拖曳内容1</p>
<p id="p2" draggable="true">拖曳内容2</p>
</div>
<div id="div2"></div>
<div id="div3"></div>
<script>
// 当拖曳开始时触发
document.ondragstart = function (event) {
console.log('源对象开始被拖动');
console.log(event.target.id);
event.dataTransfer.setData('text/html', event.target.id); // 传递id值
};
// 当拖曳结束时触发
document.ondragend = function (event) {
console.log('源对象被拖动结束');
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
}
div:nth-child(2) {
border: 1px solid green;
}
div:nth-child(3) {
border: 1px solid blue;
}
p {
height: 25px;
background-color: pink;
line-height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1" draggable="true">拖曳内容1</p>
<p id="p2" draggable="true">拖曳内容2</p>
</div>
<div id="div2"></div>
<div id="div3"></div>
<script>
// 当拖曳开始时触发
document.ondragstart = function (event) {
console.log('源对象开始被拖动');
console.log(event.target.id);
event.dataTransfer.setData('text/html', event.target.id); // 传递id值
};
// 当拖曳结束时触发
document.ondragend = function (event) {
console.log('源对象被拖动结束');
};
// 当源对象进入目标元素时
document.ondragenter = function (event) {
console.log('目标对象被源对象拖动着进入');
console.log(event.target);
};
// 当源对象悬停在目标元素上方时触发
document.ondragover = function (event) {
console.log('源对象悬停在目标元素上方');
return false;
};
// 当源对象在目标元素上方释放鼠标时
document.ondrop = function (event) {
console.log('上方释放/松手');
var id = event.dataTransfer.getData('text/html');
event.target.appendChild(document.getElementById(id));
};
</script>
</body>
</html>
【前端】【H5 API】拽托的更多相关文章
- H5拖拽 构造拖拽及缩放 pdf展示
前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...
- H5 拖拽读取文件和文件夹
1)拖拽方面的重点是:ondragover 事件 和 ondrop 事件 ondragover 是必须的,ondragover 事件里禁用掉 html 的默认事件,否则 ondrop 事件将无效(直接 ...
- H5拖拽 构造拖拽及缩放 pdf文件转换为html预览
前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...
- H5 拖拽操作
H5 拖拽操作 前言 在原生H5中,可以通过提供的api实现在网页内元素的拖拽操作.相对于传统的写法更加的简单. 而想要实现拖拽,主要需要进行两个方面的工作,第一是给元素设置draggable='tr ...
- Qt开发技术：Qt拽拖开发（一）拽托框架详解及Demo
前话 Qt中的拽拖操作详细介绍. Demo 图片拽拖 控件拽拖 窗口拽拖 拽托框架(高级开发) 拖放(Drag and Drop) 拖放提供了一种简单的可视 ...
- 关于web开发前端h5框架的选择
关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...
- 零基础如何迅速学习HTML5？新手小白学习web前端H5自白！
很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...
- python为前端提供API
作为一名前端来学习后端语言,有难度啊.这里把第一次尝试的过程做个记录 1.网上看到Python给前端提供API可以使用python的flaskweb框架 #py文件 import json from ...
- h5拖拽上传图片
h5实现拖拽上传图片 本文将为大家介绍如何通过js实现拖拽上传图片. 首先我们要禁用调浏览器默认的拖拽事件: window.onload = function(){ //拖离 document.add ...
- 移动前端—H5实现图片先压缩再上传
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
随机推荐
- 2021年1月国产数据库排行榜：OceanBase重回前三，TDSQL增长趋势最强劲！
墨天轮国产数据库排行榜新年第一期已发布.2021年1月份排行榜前三甲依次为 TiDB .DaMeng.OceanBase .PingCAP TiDB 稳居冠军的宝座,短时间内难以撼动,开源的商业数据库 ...
- 封装setItem 和 getItem 本地存储
store.js 文件 按需导出setItem 和 getItem 函数 :在utils文件里面 : export const setItem = (key, value) => { // 复杂 ...
- Nuxt.js 应用中的 close 事件钩子详解
title: Nuxt.js 应用中的 close 事件钩子详解 date: 2024/10/13 updated: 2024/10/13 author: cmdragon excerpt: clos ...
- 开发者故事：基于 KubeSphere LuBan 架构打造下一代云交付平台
前言 在 KubeSphere Marketplace,个人开发者的创意和才能正在逐渐崭露头角.今日,我们荣幸地向大家介绍 Shipper 云交付平台的开发者--凌波,一位云原生领域的资深专家. 凌波 ...
- 云原生周刊：Argo CD v2.12 发布候选版本 ｜ 2024.06.24
开源项目推荐 kOps kOps - Kubernetes Operations,是一个用于创建.销毁.升级和维护生产级高可用 Kubernetes 集群的工具.它支持在 AWS.GCP.Digita ...
- 将NC栅格表示时间维度的数据提取出来的方法
本文介绍基于Python语言,逐一读取大量.nc格式的多时相栅格文件,导出其中所具有的全部时间信息的方法. .nc是NetCDF(Network Common Data Form)文件的扩展名 ...
- python处理大量数据excel表格中间格式神器pickle.pkl文件操作说明
读取写入千万级别的excel文件费时费力,调试起来比较慢,面对这个问题,第一步可以先无脑全部转换成pkl文件,这样几乎和内存操作一样的速度. 例如: t=pd.read_excel("12月 ...
- 🎈Fluent Editor 富文本开源2个月的总结：增加格式刷、截屏、TypeScript 类型声明等新特性
你好,我是 Kagol,个人公众号:前端开源星球. Fluent Editor 是一个基于 Quill 2.0 的富文本编辑器,在 Quill 基础上扩展了丰富的模块和格式,框架无关. 功能强大.开箱 ...
- 还在为慢速数据传输苦恼？Linux 零拷贝技术来帮你！
前言 程序员的终极追求是什么?当系统流量大增,用户体验却丝滑依旧?没错!然而,在大量文件传输.数据传递的场景中,传统的"数据搬运"却拖慢了性能.为了解决这一痛点,Linux 推出了 ...
- 这可能是最好的Spring教程！即便无基础也能看懂的入门Spring，仍在持续更新。
开启这样一个系列的原因 这一段时间都在学spring,但是在学习的过程中一直都很难找到一个通俗易懂,又带了学习体系的文章教程,很多地方都不懂,需要自己去慢慢查询和理解,感觉学起来很耗时,所以我自己就像 ...