<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<style>
#touch {
width: 50px;
height: 50px;
position: absolute;
left: 100px;
top: 200px;
margin-left: -30px;
margin-top: -30px;
z-index: 999999;
}

#simple-menu {
cursor: move;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">可拖动悬浮小球</h1>
</header>
<div class="mui-content">
<div id="touch" style="width: 50px; height: 50px; position: absolute;">
<img id="simple-menu" src="huli.png" style="width: 50px; height: 50px;" />
</div>
</div>
<script>
mui.init({
swipeBack: true //启用右滑关闭功能
});
var div = document.getElementById('touch');
var viewWidth = window.screen.width;
var viewHeight = window.screen.height;
var divWidth = parseInt(div.style.width);
var divHeight = parseInt(div.style.height);
div.addEventListener('touchmove', function(event) {
event.preventDefault(); //阻止其他事件
// 如果这个元素的位置内只有一个手指的话
if(event.targetTouches.length == 1) {
var touch = event.targetTouches[0]; // 把元素放在手指所在的位置
var tempWidth = touch.pageX;//存储x坐标
var tempHeigth = touch.pageY;//存储Y坐标
if((touch.pageX + divWidth) > viewWidth) {//超越右边界
tempWidth = viewWidth - divWidth/2;
}
if((touch.pageY + divHeight) > viewHeight) {//超越下边界
tempHeigth = viewHeight - divHeight;
}
if((touch.pageX - divWidth)<0){//超越左边界
tempWidth=divWidth/2;
}
if((touch.pageY - divHeight)<0){//超越上边界
tempHeigth=divHeight/2;
}
div.style.left = tempWidth + 'px';
div.style.top = tempHeigth + 'px';
div.style.background = "";
}
}, false);
</script>
</body>

</html>

touchmover手机移动端的拖动的更多相关文章

  1. 移动端：div在手机页面上随意拖动

    <!doctype html> <html> <head> <title>弹窗</title> <meta charset=" ...

  2. 【转载】jQuery手机移动端触屏日历日期选择

    文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...

  3. H5手机移动端调起浏览器（qq浏览器，uc浏览器）自带分享功能实例

    H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例 (转载:https://blog.csdn.net/weixin_38787928/article/details/86741227 ...

  4. 黄聪：WordPress 多站点建站教程（一）：怎样开启WordPress多站点功能，实现手机移动端主题开发，与主站用户数据共享

    为了开发手机移动端的wordpress,需要使用Wordpress的多站点功能. 1.打开WordPress根目录下的wp-config.php文件, 在文件的任何位置加上以下内容: define(' ...

  5. 16Aspx.com-PHP企业整站源码 景观石材大理石类织梦模板 含手机移动端 完整源码 APP+PC

    =============================================== 源码站长资源交易专业网-商业源码下载,VIP源码,程序交易,毕业设计交易,站长交易|- 16aspx.c ...

  6. 手机移动端网站开发流程HTML5

    手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...

  7. 【超级干货】手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  8. 手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  9. PHP判断访问者手机移动端还是PC端的函数，亲测好用

    ,用手机访问PC端WWW域名的时候,自动判断跳转到移动端,用电脑访问M域名手机网站的时候,自动跳转到PC端,我们团队在开发erdaicms二代旅游CMS网站管理系统的时候(http://www.erd ...

随机推荐

  1. Hadoop中MapReduce作业流程图

    MapReduce的流程分为11个步骤,4个实体 1.客户端:编写MapReduce的代码,配置作业,提交作业 2.JobTracker:初始化作业,分配作业,与TaskTracker通信,协调整个作 ...

  2. 【PHP】文件写入和读取详解

    文章提纲: 一．实现文件读取和写入的基本思路 二．使用fopen方法打开文件 三．文件读取和文件写入操作 四．使用fclose方法关闭文件 五．文件指针的移动 六．Windows和UNIX下的回车和换 ...

  3. git常用命令记录

    配置本地仓库 git config --global user.name.git config --global user.email 查看配置详情 git config -l 初始仓库 git in ...

  4. Spring Cloud 客服端负载均衡 Ribbon

    一.简介   Spring Cloud Ribbon 是一个基于Http和TCP的客服端负载均衡工具,它是基于Netflix Ribbon实现的.它不像服务注册中心.配置中心.API网关那样独立部署, ...

  5. 一个gif远程crash你的微信！

    测试了一下iPhone6,iPhone7不同版本的 iOS上,收到某个天线宝宝的gif,最新版本的微信都会挂. demo视频:演示视频 通过 crash log可以看到微信最新的6.5.8版本在打开 ...

  6. Elasticsearch与Solr

    公司之前有个用Lucene实现的伪分布式项目,实时性很差,后期数据量逐渐增大的时候,数据同步一次需要十几小时.当时项目重构考虑到的是Solr和ES,我参与的是Solr技术的预研.因为项目实时性要求很高 ...

  7. Images as x-axis labels

    Open-source software is awesome. If I found that a piece of closed-source software was missing a fea ...

  8. AVL树（平衡二叉查找树）

    首先要说AVL树,我们就必须先说二叉查找树,先介绍二叉查找树的一些特性,然后我们再来说平衡树的一些特性,结合这些特性,然后来介绍AVL树. 一.二叉查找树 1.二叉树查找树的相关特征定义 二叉树查找树 ...

  9. 【web前端开发】浏览器兼容性处理

    1.居中问题div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div里的 ...

  10. spring异常处理器

    一.本篇文章旨在讨论异常处理器: 1.因为异常处理器在实战中通常用来处理开发人员自定义的运行时异常,所以如果要了解如何自定义运行时异常,请自行搜索相关资料. 2.本文的demo用IndexOutOfB ...