[前端] 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 " ...
随机推荐
- TypeScript中Never类型和类型断言
Never 类型 never类型表示:那些永不存在的值的类型. 例如:never类型是那些总是会[抛出异常]或根本就[不会有返回值的函数表达式]或[箭头函数表达式的返回值类型] never类型是任何类 ...
- vue中diff算法处理新旧节点的流程
vue中diff算法处理新旧节点的流程 patch函数的作用 function patch(oldVnode: VNode | Element, vnode: VNode): VNode { let ...
- 无参数RCE
三种绕过姿势 gettallheaders() get_defined_vars() session_id() 题目情景 <?php if(';' === preg_replace('/[a-z ...
- .NET Core(C#) PadLeft和PadRight特定格式字符串长度补齐的方法和js中如何填充字符串
.NET Core(C#) 1､PadLeft和PadRight使用说明 两个方法都是对字符串格式化进行补齐填充,PadLeft是左边,而PadRight是右边 '1010'.PadLeft(10,' ...
- Python 实现进制转换与反汇编
通过利用反汇编库,并使用python编写工具,读取PE结构中的基地址偏移地址,找到OEP并计算成FOA文件偏移,使用反汇编库对其进行反汇编,并从反汇编代码里查找事先准备好的ROP绕过代码,让其自动完成 ...
- CE修改器入门：寻找指针基址
上一步阐述了如何使用代码替换功能对付变化位置的数据地址,但这种方法往往不能达到预期的效果,所以我们需要学习如何利用指针,在本关的 Tutorial.exe 窗口下面有两个按钮,一个会改变数值,另一个不 ...
- AnyCAD程序无法启动的问题解决方法
在某些电脑上会出现基于AnyCAD开发的程序无法启动的问题,如: System-ArgumentEcception: Please check the dependendes 解决方法 安装最新的VS ...
- Python Fire：自动生成命令行接口
命令行程序是平时写一些小工具时最常用的方式. 为了让命令行程序更加灵活,我们常常会设置一些参数,根据参数让程序执行不同的功能.这样就不用频繁的修改代码来执行不同的功能. 随着命令行程序功能的丰富,也就 ...
- 教你用JavaScript实现粘性导航
案例介绍 欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个粘性导航.移动页面导航仍在页面上方.通过实战我们将学会scrollY属性.offse ...
- SpringCloud Config配置中心实战
介绍 本文以理论结合实践编写,篇幅较长,各位看官保持耐心:),部分内容引用自网络. 什么是配置中心? 当微服务过多的时候,每个微服务的配置很难集中管理.SpringCloud Config通过git代 ...