/**
* 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实现移动端悬浮图标拖拽的更多相关文章

  1. Hammer.js 实现移动端元素的拖拽库

    1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...

  2. nw.js FrameLess Window下的窗口拖拽与窗口大小控制

    nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

  3. PC端的鼠标拖拽滑动

    1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=fun ...

  4. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  5. 适合pc端的移动拖拽,分享一下。

    h5新加的特性拖拽事件,但是只适合PC端哦.不多说了上代码 <!DOCTYPE html> <html> <head> <title></titl ...

  6. 利用插件(jQuery-ui.js)实现表格行的拖拽排序

    template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...

  7. 关于js在一个固定的盒子里面拖拽的问题(包含临界值)

    回武汉打卡第三天,武汉加油,逆战必胜!今天我们一起分享一下js拖拽的问题. 当然实现拖拽方法是有很多的,下面简单讲一种方法,大致思路如下: 首先需要用到的事件主要有  onmousedown,onmo ...

  8. js实现弹出框的拖拽

    //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...

  9. js基础 -----鼠标事件(按下 拖拽)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Servlet中获取POST请求的参数

    在servlet.filter等中获取POST请求的参数 form表单形式提交post方式,可以直接从 request 的 getParameterMap 方法中获取到参数 JSON形式提交post方 ...

  2. 命名规范 camel case, pascal case, hyphen

    2019-11-08  refer : https://ux.stackexchange.com/questions/43174/update-vs-modify-vs-change-create-v ...

  3. poj 1064 求解最大化问题

    对于二分而言,如果判断条件比较简单的话,在求解最大化或者最小化问题的时候就比较适用但是这道题目吖的卡精度.. #include<cstdio> #include<iostream&g ...

  4. O058、Snapshot Volume 操作

    参考https://www.cnblogs.com/CloudMan6/p/5657744.html   Snapshot 可以为 volume 创建快照,快照中保存了 volume当前的状态,以后可 ...

  5. HBASE学习笔记(一)

    一.数据库OLAP和OLTP简单的介绍比较 1.OLTP:on-line transaction processing在线事务处理,应用在传统关系型数据库比较多,执行日常基本的事务处理,比如数据库记录 ...

  6. java字符串大小写转换

    String test="SHA34cccddee";    System.out.println(test.toUpperCase());//小写转大写 String test= ...

  7. jeesite直接登录——真实破解

    前台 后台 @RequiresPermissions("alarm:alarm:view")一定要注释 —————————————————————————————————————— ...

  8. java中的运算符与表达式

    运算符与表达式 运算符分类: 0.赋值运算符 = 1.算数运算符 + - * / % 2.比较运算符 < > == <= >= != 3.逻辑运算符 & | ! &am ...

  9. 在已有lnmp环境的基础上安装PHP7

    Centos7.6系统 已经安装lnmp一键环境 想装个apache跑php7, apache安装在这 https://www.cnblogs.com/lz0925/p/11227063.html 要 ...

  10. python list按字典的key值排序

    方法1: result_list = sorted(origin_list, key=lambda e: e.__getitem__('order_key')) 方法2: import operato ...