<!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. 抓包工具 Charles 使用心得

    前言 虽然实习工作还没有着落,但学习还是要继续的嘛,今天就来学习使用下 Mac 下截取网络封包的工具:Charles. 我想,如果你是个善于利用搜索引擎的人,那么在 Google 中输入「Charle ...

  2. Android利用文本分割拼接开发一个花藤文字生成

    今天研究了一个小软件,挺有意思的,尽管网上已经很多那种软件,但是今天还是在这里给大家分享一下这个软件的具体开发过程 首先,这个软件只需要三个主要控件,EditText.Button以及TextView ...

  3. Spring MVC 请求处理流程概览

    SpringMVC工作流程 图一:请求流程概述 图二:请求在每个组件的处理 解释Spring工作流程 1.用户向服务器发送请求,请求被spring前端控制Servelt DispatcherServe ...

  4. chroot jail

    注意,原标题是:Linux Virtualization using Chroot Jail,我实在不知道怎么翻译,所以,自作主张,选了chroot jail作为标题.原文地址 chroot jail ...

  5. 一个基于thinkphp的微信授权登陆功能

    共享一份基于thinkphp开发的用户授权登陆的功能代码,本实例使用thinkphp的第三方微信公众平台PHP-SDK,地址https://github.com/dodgepudding/wechat ...

  6. textView布局的一点体会

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  7. .Net程序员学用Oracle系列(30)：零碎补充、最后总结(The End)

    1.同义词 2.Flashback 技术 3.连接字符串的写法 4.转义字符 & 特殊运算符 5.文件类型 6.查看参数 & 修改参数 7.AWR 工具 8.学习方法 & 学习 ...

  8. 教育行业app开发新契机，在线教育要从B端出发

    近几年移动互联网教育风生水起,在运营模式上的开拓也各不相同,随着移动互联网进入下半场,好未来.新东方.猿题库.学霸君等,都在加速三四线地区布局,以及教育行业app开发和升级. 在移动互联网下半场,用户 ...

  9. C# MVC权限验证

    前言 之前一直没怎么接触过权限验证这块,刚好公司老平台改版,就有了这篇权限验证.此篇文章大致讲解下 精确到按钮级别的验证如何实现.以及权限验证设计的参考思路(菜鸟一枚,大神勿喷). 在开发大项目的时候 ...

  10. 放弃FreeMark？

    JAVA项目FreeMark 生产静态页面   a)    弊端                 i.          依赖后台工程师拼装页面,不利于前端.后台工作完全解耦. ii.         ...