js实现移动端悬浮图标拖拽
/**
* Created by Administrator on 2019/5/23.
*/
window.onload = function () {
var oDiv = document.getElementById('touchMove'); var disX, moveX, L, T, starX, starY, starXEnd, starYEnd; oDiv.addEventListener('touchstart', function (e) {
//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) {
L = e.touches[0].clientX - disX;
T = e.touches[0].clientY - disY;
starXEnd = e.touches[0].clientX - starX;
starYEnd = e.touches[0].clientY - starY;
//console.log(L);
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';
//console.log(moveX);
this.style.left = moveX;
this.style.top = moveY;
});
window.addEventListener('touchend', function (e) {
//alert(parseInt(moveX))
//判断滑动方向 });
}
js实现移动端悬浮图标拖拽的更多相关文章
- Hammer.js 实现移动端元素的拖拽库
1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...
- nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
- PC端的鼠标拖拽滑动
1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=fun ...
- 原生JS实现弹出窗口的拖拽
上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...
- 适合pc端的移动拖拽,分享一下。
h5新加的特性拖拽事件,但是只适合PC端哦.不多说了上代码 <!DOCTYPE html> <html> <head> <title></titl ...
- 利用插件(jQuery-ui.js)实现表格行的拖拽排序
template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...
- 关于js在一个固定的盒子里面拖拽的问题(包含临界值)
回武汉打卡第三天,武汉加油,逆战必胜!今天我们一起分享一下js拖拽的问题. 当然实现拖拽方法是有很多的,下面简单讲一种方法,大致思路如下: 首先需要用到的事件主要有 onmousedown,onmo ...
- js实现弹出框的拖拽
//HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...
- js基础 -----鼠标事件(按下 拖拽)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- gRPC 本地服务搭建
RPC RPC 原理 主流 RPC 框架 gRPC 概述 特点 服务端创建 定义服务 生成 gRPC 代码 服务端实现 客户端实现 踩坑记录 源码 RPC RPC 原理 RPC 框架的目标就是让远程服 ...
- Netty如何支持三种Reactor
参考文献:极客时间傅健老师的<Netty源码剖析与实战>Talk is cheap.show me the code! 什么是Reactor及三种版本 反应堆设计模式(Reactor pa ...
- 关于python中的包,模块导入的问题详解(二)
from import导入 紧接着的是from xx import xx 语法 1 ################ 2 from my_moudule import name 3 print(na ...
- 从入门到自闭之Python集合,深浅拷贝(大坑)
小数据池 int: -5~256 str: 字母,数字长度任意符合驻留机制 字符串进行乘法时总长度不能超过20 特殊符号进行乘法时只能乘以0 代码块: 一个py文件,一个函数,一个模块,终端中的每一行 ...
- Python学习8——魔法方法、特性和迭代器
Python中很多名称比较古怪,开头和结尾都是两个下划线.这样的拼写表示名称有特殊意义,因此绝不要在程序中创建这样的名称.这样的名称中大部分都是魔法(方法)的名称.如果你的对象实现了这些方法,他们将在 ...
- 数值优化(Numerical Optimization)学习系列-无梯度优化(Derivative-Free Optimization)
数值优化(Numerical Optimization)学习系列-无梯度优化(Derivative-Free Optimization) 2015年12月27日 18:51:19 下一步 阅读数 43 ...
- CA机构及SSL证书
互联网安全形势日趋严峻,企业重视自身互联网安全已成必然,SSL认证成大势所趋.要部署SSL证书最首先就是选好CA机构!其次选择适合自己的SSL证书!今天就来介绍一下如何选择CA机构及SSL证书! 首先 ...
- shiro过滤器机制
shiro内置过滤器介绍 https://blog.csdn.net/qq_35608780/article/details/71703197 Shiro的Filter机制详解---源码分析 http ...
- 作业8:常用java命令(二)
一.jinfo(Configuration Info for Java) 1.功能:jinfo可以实时地查看和调整虚拟机的各项参数. 2.参数: 选项 作用 -flag name 打印改名字的VM设置 ...
- WIN7(WINDOWS7)在添加网络打印机时提示这个,这里的密码是什么密码,能不能不用密码?
360急救箱应该提高计算机的网络访问安全性,加上与验证机制,所以当你要访问的网络资源,你需要输入用户名和密码进行认证. 1,点击“开始 - 运行”,输入gpedit.msc然后按Enter键. 2,计 ...