【前端】【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的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
随机推荐
- 使用 reduce 统计字符串每个字母出现的次数
// 统计字符串每个字母出现的次数 let str = 'asdfssaaasasasasaa' let obj = str.split('').reduce(function (prev, item ...
- 【转】sqlplus/RMAN/lsnrctl 等工具连接缓慢
AIX上sqlplus /as sysdba rman target / 或者lsnrctl start时或者通过sqlplus system/oracle@orcl这样通过监听连接等方式来登陆时非常 ...
- Nuxt.js 应用中的 build：done 事件钩子详解
title: Nuxt.js 应用中的 build:done 事件钩子详解 date: 2024/10/21 updated: 2024/10/21 author: cmdragon excerpt: ...
- 彻底理解spring框架当中的依赖注入（DI）与控制反转（IOC）理念
什么是依赖注入 人生当中第一次听说到这个概念是在spring框架的学习当中,当然依赖注入并不局限于spring,其实依赖注入早已不是一个新鲜词,而是一个犹如古董般的设计理念,但是我还年轻呐那么就从这里 ...
- ASN.1 DER证书私钥的提取
Java生成的证书在.Net里面无法导入.原因是Java导入的整个ASN.1格式的证书..Net需要设置的只是证书的密钥(公钥.私钥).无法直接使用,因此需要提取密钥. 1.查看密钥 使用lapo.i ...
- GoLand IDE 如何设置每次打开时先展示启动界面
GoLand IDE 如何设置每次打开时先展示启动界面 打开设置,在SystemSeting下进行如下操作即可
- 史上最全ThreadLocal 详解
概述 线程本地变量.当使用 ThreadLocal 维护变量时, ThreadLocal 为每个使用该变量的线程提供独立的变量副本,所以每一个线程都可以独立地改变自己的副本,而不会影响其它线程. 每个 ...
- mysql 备份还原命令备忘
1.备份 mysqldump -u username -p databasename tableName > backupfile.sql 2.还原 mysql -u username -p p ...
- 快速上手 KSQL：轻松与数据库交互的利器
上次我们通过 Docker 安装了 KingbaseES 数据库,今天我们将开始学习并快速上手使用 KSQL.简单来说,KSQL 本质上是一个客户端工具,用于与数据库进行交互.启动后,我们可以像使用普 ...
- 手搓党分享：用Air700E开发板+毫米波雷达，搓一个睡眠监测仪！
只能说,看到这个大佬分享的睡眠监测仪,手上的手环瞬间不香了... 用Air700E开发板+毫米波雷达,手搓一个开箱即用的睡眠监测仪,不花冤枉钱! 一.项目原理及硬件制作 毫米波是指频率范围从30- ...