[前端] 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 " ...
随机推荐
- Vue.use和install之间的关系
创建一个plugins.js文件 跟main.js同级下,创建一个plugins.js文件 export default { // install是vue给我们提供的.它会自动去执行install. ...
- Unity2019使用Android Studio 4出安卓包
前言 在我所经历的项目组中有这几种方法来生成APK 直接在Unity生成APK,可以接入SDK 使用Unity导出Android Studio工程手动生成APK 使用Unity导出Android St ...
- 人工智能自然语言处理：N-gram和TF-IDF模型详解
人工智能自然语言处理:N-gram和TF-IDF模型详解 1.N-gram 模型 N-Gram 是一种基于统计语言模型的算法.它的基本思想是将文本里面的内容按照字节进行大小为 N 的滑动窗口操作,形成 ...
- Scrapy数据解析和持久化
Scrapy框架的使用 - pySpider - 什么是框架? - 就是一个具有很强通用性且集成了很多功能的项目模板(可以被应用在各种需求中) - scrapy集成好的功能: - 高性能的数据解析操作 ...
- 会话跟踪技术之COOKIE
会话跟踪技术之COOKIE 一.为什么要用会话控制 我们需要我们的站点可以跟踪客户端与服务器之间的交互,保存和记忆每个用户的身份和信息. 几个疑问 我先访问A页面后访问B页面,HTTP无法知道是不是同 ...
- 揭秘C语言的心脏：深入探索指针与数组的奥秘
欢迎大家来到贝蒂大讲堂 养成好习惯,先赞后看哦~ 所属专栏:C语言学习 贝蒂的主页:Betty's blog 1. strlen()和sizeof的区别 名称 区别 sizeof 1. sizeof是 ...
- .NET 云原生架构师训练营（模块二 基础巩固 路由与终结点）--学习笔记
2.3.3 Web API -- 路由与终结点 路由模板 约定路由 特性路由 路由冲突 终结点 ASP.NET Core 中的路由:https://docs.microsoft.com/zh-cn/a ...
- JS 数组中找到与目标值最接近的数字，记一次工作中关于二分查找的算法优化
壹 ❀ 引 在最近的工作中,有一个任务是需要修复富文本编辑器字号显示的BUG.大概情况就是,从WPS中复制不同样式的标题.正文到到项目编辑器中,发现没办法设置选中的文本为正文:而且字体字号都显示为默认 ...
- NC51179 选课
题目链接 题目 题目描述 学校实行学分制. 每门的必修课都有固定的学分,同时还必须获得相应的选修课程学分. 学校开设了 N 门的选修课程,每个学生可选课程的数量 M 是给定的. 学生选修了这 M 门课 ...
- Java线程状态（生命周期）--一篇入魂
1.线程状态(生命周期) 一个线程在给定的时间点只能处于一种状态. 线程可以有如下6 种状态: New (新创建):未启动的线程: Runnable (可运行):可运行的线程,需要等待操作系统资源: ...