/**
* 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. 第一章 impala的安装

    目录 第一章 impala的安装 1.impala的介绍 imala基本介绍 impala与hive的关系 impala的优点 impala的缺点: impala的架构以及查询计划 2.impala的 ...

  2. VerilogHDL学习

    No.1 Verilog HDL程序结构 Verilog 描述硬件的基本设计单元是模块 module 复杂的电子电路构建主要是通过模块之间的相互连接调用来实现的,在Verilog中将模块包含在关键字 ...

  3. 用CTime类得到当前日期 时间

    (1)定义一个CTime类的对象CTime time: (2)得到当前时间time = CTime::GetCurrentTime(); (3)Get Year(),GetMonth(),GetDay ...

  4. Spring 注解介绍

    @Component与@Bean的区别 @Component注解表明一个类会作为组件类,并告知Spring要为这个类创建bean. @Bean注解告诉Spring这个方法将会返回一个对象,这个对象要注 ...

  5. Linxu-mysql5.7源码安装

    Mysql5.7 Linux安装教程 1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/local/mysql数据库保存位置:/data/mysql日志保存位置 ...

  6. 【POI】使用POI 创建生成XLS,打开xls文件提示【此文件中某些文本格式可能已经更改,因为它已经超出最多允许的字体数。】

    使用POI 创建生成XLS,打开xls文件提示[此文件中某些文本格式可能已经更改,因为它已经超出最多允许的字体数.] 原因: 是因为在POI处理xls的过程中,太多次调用了: HSSFFont fon ...

  7. 怎样在 Vue 的 component 组件中使用 props ?

    1. 在注册一个组件时, 添加一个 props 属性, 将需要添加的 props 作为数组的元素进行添加, 比如下面的例子中, 我们添加了一个变量 name , 他就是一个 props, 我们可以通过 ...

  8. 进阶Java编程(5)基础类库

    Java基础类库 1,StringBuffer类 String类是在所有项目开发之中一定会使用到的一个功能类,并且这个类拥有如下的特点: ①每一个字符串的常量都属于一个String类的匿名对象,并且不 ...

  9. javascript——加强for循环 和Java中的加强for循环的区别

    javascript中获得的是下标      in var id=[4,5,6]; for (var index in id) { console.log(id[index]); } Java中获得的 ...

  10. vb.net DBEntities框架联表查询 Join

    在项目中配置好DBEntities 使用两个表:主表Table, 子表Table_Item 主要是用到了委托和泛型,ForEach用的是不带返回值的委托 Sub GetDb() Dim st As N ...