[前端] 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 " ...
随机推荐
- el-popover 点击取消按钮，弹窗仍然无法关闭
<el-popover placement="bottom" width="200" :ref="aa" :visible.sync= ...
- win11和win10的快捷键列表
win11特有的快捷键 win键就是图案是windows图标的那个按键 作用 快捷键 打开快速设置,win11是展开音量,wifi,蓝牙的设置项,win10也可以用 win + a 打开通知中心和日历 ...
- pycharm alt+f7(查找)显示动态用法的结果过多(dynamic usages)
在脚本语言中查找引用时,如果有同名函数,在动态用法那一栏会出现大量的结果,,如何缩小或者动态用法(dynamic usages)的结果呢? 在官网上也有提出了这个问题,但官方没有给出答案issue:P ...
- Linux和Windows系统下安装深度学习框架所需支持:Anaconda、Paddlepaddle、Paddlenlp、pytorch，含GPU、CPU版本详细安装过程
Linux和Windows系统下安装深度学习框架所需支持:Anaconda.Paddlepaddle.Paddlenlp.pytorch,含GPU.CPU版本详细安装过程 1.下载 Anaconda ...
- 强化学习从基础到进阶-常见问题和面试必知必答[5]：：梯度策略、添加基线（baseline）、优势函数、动作分配合适的分数（credit）
强化学习从基础到进阶-常见问题和面试必知必答[5]::梯度策略.添加基线(baseline).优势函数.动作分配合适的分数(credit) 1.核心词汇 策略(policy):在每一个演员中会有对应的 ...
- LyScript 批量搜索反汇编特征
LyScript 插件实现对特定汇编指令片段的批量搜索功能,用户传入一个汇编指令列表,然后循环搜索该列表内的所有指令特征,如果找到了,则返回该指令的内存地址. 插件地址:https://github. ...
- 苹果iOS的应用移除主屏幕及恢复找回
昨天刷到一个苹果iOS系统更换微信图标的,然后就添加了一个,发现那个记录通知数字问题,想恢复回来,所以就有了此文. https://www.cnblogs.com/lzhdim/p/17909867. ...
- CentOS7.5上Oracle19c离线rpm安装
CentOS7.5上Oracle19c离线rpm安装 一.基础环境配置及依赖安装(1)关闭系统防火墙(如外网环境不能关闭防火墙自行开放相关需要使用的端口即可) systemctl stop firew ...
- Python脚本的输入输出
一.必备知识回顾和补充 1. Hello world回顾 1.输出文本,使用print函数输出文本. 2.让用户输入名字,然后输出带名字的问候语.使用input函数获取用户的输入,使用变量保存输入值. ...
- 查看调整cpu频率及模式
使用cpufrequtils查看调整cpu频率及模式 cpufrequtils是一个查看和修改CPU频率GHz的工具 有些物理服务器使用默认频率进行运行,这时可以使用该工具进行就该CPU的核心频率 安 ...