[前端] html和原生js实现鼠标拖动和触摸拖动以及点击后跟随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>悬浮窗拖动点击事件</title>
<style>
div {
width: 100px;
height: 100px;
position: fixed;
border-radius: 50%;
left: calc(100% - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="div" draggable="true" id="back-button"></div>
</body>
<script>
window.onload = function () {
// 标记是拖曳还是点击
var oDiv = document.getElementById('back-button');
var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;
let beforeX, beforeY; // 鼠标点击的坐标
var is_clicked = false;
oDiv.addEventListener('click', function(e){
var mousemove_fun = function(eve){
L = e.clientX - disX;
T = e.clientY - disY;
moveX = L + 'px';
moveY = T + 'px';
this.style.left = moveX;
this.style.top = moveY;
}
if (is_clicked){
is_clicked = false;
oDiv.style.backgroundColor="red";
oDiv.removeEventListener("mousemove", mousemove_fun);
}else{
is_clicked = true;
oDiv.style.backgroundColor="black";
disX = e.clientX - this.offsetLeft;
disY = e.clientY - this.offsetTop;
oDiv.addEventListener("mousemove", mousemove_fun);
}
});
oDiv.addEventListener('dragstart', function(e){
// console.log(e);
disX = e.clientX - this.offsetLeft;
disY = e.clientY - this.offsetTop;
});
oDiv.addEventListener('drag', function(e){
// console.log(e);
L = e.clientX - disX;
T = e.clientY - disY;
if (L < 0) {
L = 0;
} else if (L > document.documentElement.clientWidth - this.offsetWidth) {
L = document.documentElement.clientWidth - this.offsetWidth;
}
if (T < 0) {
T = 0;
} else if (T > document.documentElement.clientHeight - this.offsetHeight) {
T = document.documentElement.clientHeight - this.offsetHeight;
}
moveX = L + 'px';
moveY = T + 'px';
this.style.left = moveX;
this.style.top = moveY;
e.preventDefault();
});
oDiv.addEventListener('dragend', function(e){
// console.log(e);
L = e.clientX - disX;
T = e.clientY - disY;
if (L < 0) {
L = 0;
} else if (L > document.documentElement.clientWidth - this.offsetWidth) {
L = document.documentElement.clientWidth - this.offsetWidth;
}
if (T < 0) {
T = 0;
} else if (T > document.documentElement.clientHeight - this.offsetHeight) {
T = document.documentElement.clientHeight - this.offsetHeight;
}
moveX = L + 'px';
moveY = T + 'px';
this.style.left = moveX;
this.style.top = moveY;
e.preventDefault();
});
oDiv.addEventListener('touchstart', function (e) {
// console.log(e);
beforeX = this.offsetLeft;
beforeY = this.offsetTop;
e.preventDefault();
// 阻止触摸时页面的滚动，缩放
disX = e.touches[0].clientX - this.offsetLeft;
disY = e.touches[0].clientY - this.offsetTop;
// 手指按下时的坐标
starX = e.touches[0].clientX;
starY = e.touches[0].clientY;
});
oDiv.addEventListener('touchmove', function (e) {
// console.log(e);
L = e.touches[0].clientX - disX;
T = e.touches[0].clientY - disY; // 移动时 当前位置与起始位置之间的差值
starXEnd = e.touches[0].clientX - starX;
starYEnd = e.touches[0].clientY - starY;
if (L < 0) {
// 限制拖拽的X范围，不能拖出屏幕
L = 0;
} else if (L > document.documentElement.clientWidth - this.offsetWidth) {
L = document.documentElement.clientWidth - this.offsetWidth;
}
if (T < 0) {
// 限制拖拽的Y范围，不能拖出屏幕
T = 0;
} else if (T > document.documentElement.clientHeight - this.offsetHeight) {
T = document.documentElement.clientHeight - this.offsetHeight;
}
moveX = L + 'px';
moveY = T + 'px';
this.style.left = moveX;
this.style.top = moveY;
});
oDiv.addEventListener('touchend', function () {
// console.log(e);
// 鼠标点击的坐标 和 抬起额坐标一致 就是点击事件
if (beforeX === this.offsetLeft && beforeY === this.offsetTop) {
alert('点击')
}
});
}
</script>
</html>
可以实现鼠标拖动和触摸拖动，以及点击后跟随鼠标移动
[前端] html和原生js实现鼠标拖动和触摸拖动以及点击后跟随鼠标移动的更多相关文章
- 原生js和jquey获取窗口宽高，滚动条，鼠标位置总结
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...
- 关于wpf中popup跟随鼠标移动显示
最近在做一个画图工具,里面有一个功能是需要实现,当鼠标移动的时候在,鼠标的旁边显示坐标信息. 第一反应是想到了tooltip,但是tooltip有许多的限制,查询资料的过程中看到了popup,popu ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- 原生js及H5模拟鼠标点击拖拽
一.原生js 1.拖拽的流程动作 鼠标按下 触发onmousedown事件 鼠标移动 触发onmousemove事件 鼠标松开 触发onmouseup事件 2.注意事项: 要防止div移出可视框,要限 ...
- 原生JS实现拖动滑块验证登录效果
♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装 代码如下: <!DOCTYPE html> <htm ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 原生JS实现轮播+学前端的感受（防止走火入魔）
插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以 ...
- 使用JS制作一个鼠标可拖的DIV（一）——鼠标拖动
使用 JS 来实现一个可拖动的DIV,主要是使用到以下几个事件: 1.鼠标按下:DIV元素的onmousedown. 2.鼠标按住拖动:document 的 onmousemove 元素. 3.鼠标放 ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
随机推荐
- How to Die ( Since 10.10 )
以后再也不要相信 sqrt 的精度!对 long long 级别的数取 sqrt 会炸精度! 对于区间差分 \([l,r]\) 的问题,一定要注意是否会出现 \(l>r\) 的情况!(\(|A| ...
- C# WPF 开发一个 Emoji 表情查看软件
微软在发布 Windows 11 系统的时候,发布过一个开源的 Emoji 表情 fluentui-emoji .因为我经常需要里面的一些表情图片,在仓库一个个查找特别的不方便,所以我做了一个表情查看 ...
- vue/cli3.0相对路径打包
在项目下新增vue.config.js文件 module.exports={ productionSourceMap: false, publicPath: process.env.NODE_ENV ...
- js获取字符串最后几位字符数
截取字符串 为什要截取字符串呢??? 因为有些时候,我们需要判断某一个字符串中是不是,含有特定的字符 substring(a)从起始位置开始(包含a这个位置),一直到字符串的末尾(截取字符串最后6个) ...
- [置顶] Gin--Begoo框架快速指南
Gin篇 第一篇: Gin-官方文档 第二篇: Gin-安装,修改启动端口,get/post 请求参数,模型绑定shouldbind,自定义验证器/表单验证 第三篇: Gin-上传文件/返回前端.中间 ...
- 8.1 TEB与PEB概述
在开始使用TEB/PEB获取进程或线程ID之前,我想有必要解释一下这两个名词,PEB指的是进程环境块(Process Environment Block),用于存储进程状态信息和进程所需的各种数据.每 ...
- SpringBoot基于Spring Security的HTTP跳转HTTPS
简单说说 之所以采用Spring Security来做这件事,一是Spring Security可以根据不同的URL来进行判断是否需要跳转(不推荐), 二是不需要新建一个TomcatServletWe ...
- MASA学习和总结
一.MASA概述 MASA是温州数闪科技推出的开源产品,目前有三个产品线,分别是MASA Stack,MASA Framework,MASA Blazor. MASA Stack:是一个开源.企业级. ...
- 今天才知道 Ping 命令的意义
当ping一个域名的时候 可以知道这个域名的解析情况,也可以知道 当前电脑是否联通了 域名. 可以看到 diandaxia.com 的域名解析是 112.124.182.113 ,而www.dian ...
- 立创EDA使用笔记
立创EDA 在立创EDA上制作的PCB可以直接导入到嘉立创下单, 每个注册用户每个月可以下两个免费订单, 限制PCB尺寸10CMx10CM, 每单五片, 连制作到快递全部免费, 非常适合做样板. 立创 ...