touchmover手机移动端的拖动
<!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手机移动端的拖动的更多相关文章
- 移动端：div在手机页面上随意拖动
<!doctype html> <html> <head> <title>弹窗</title> <meta charset=" ...
- 【转载】jQuery手机移动端触屏日历日期选择
文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...
- H5手机移动端调起浏览器（qq浏览器，uc浏览器）自带分享功能实例
H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例 (转载:https://blog.csdn.net/weixin_38787928/article/details/86741227 ...
- 黄聪：WordPress 多站点建站教程（一）：怎样开启WordPress多站点功能，实现手机移动端主题开发，与主站用户数据共享
为了开发手机移动端的wordpress,需要使用Wordpress的多站点功能. 1.打开WordPress根目录下的wp-config.php文件, 在文件的任何位置加上以下内容: define(' ...
- 16Aspx.com-PHP企业整站源码 景观石材大理石类织梦模板 含手机移动端 完整源码 APP+PC
=============================================== 源码站长资源交易专业网-商业源码下载,VIP源码,程序交易,毕业设计交易,站长交易|- 16aspx.c ...
- 手机移动端网站开发流程HTML5
手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...
- 【超级干货】手机移动端WEB资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- 手机移动端WEB资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- PHP判断访问者手机移动端还是PC端的函数，亲测好用
,用手机访问PC端WWW域名的时候,自动判断跳转到移动端,用电脑访问M域名手机网站的时候,自动跳转到PC端,我们团队在开发erdaicms二代旅游CMS网站管理系统的时候(http://www.erd ...
随机推荐
- 关于XML(可扩展标记语言)的基础知识与写法------2017-05-18
XML(Extensible Markup Language) HTML:超文本标记语言,主要用来展示 XML:可扩展标记语言,用来做数据传输XML特点: 1.树状结构,有且只有一个根 2.标签名 ...
- 关于Python编码，超诡异的，我也是醉了
Python的编码问题,真是让人醉了.最近碰到的问题还真不少.比如中文文件名.csv .python对外呈现不一致啊,感觉好不公平. 没图说个JB,下面立马上图. 我早些时候的其他脚本,csv都是 ...
- linux命令11
tar命令的使用 tar文件是把几个文件的(或)目录集合在一个文件夹里,是创建备份和归档的最佳工具. [root@localhost ~]# tar --help用法: tar [选项...] [FI ...
- Java之File类
一.初见File类 java.io.File类代表系统中的文件(文件或目录) 常用构造方法 File(String pathname) File(String parent, String child ...
- Android React Native 开发环境搭建---windows下
环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以 ...
- 常见的Message Queue应用场景
在最近的工作的里面有同事问到我说,为什么我们需要一个Message Queue,Message Queue可以在哪些地方用,经过一些整理,大概能找到这些点,假如你有这方面的要求,也可以考虑使用Mess ...
- 关于Myeclipse不能加载已有项目的问题
如果缺少.project文件,你可以新建一个同名项目,把Use default location 去掉,选择要加载的项目,完成
- Error creating bean with name 'signController': Injection of autowired dependencies failed
出现了一大串错误,Error creating bean with name 'signController': Injection of autowired dependencies failed. ...
- .NET中使用Redis总结
注:关于如何在windows,linux下配置redis,详见这篇文章:) 启动遇到问题 使用命令[redis-server.exe redis.windows.conf],启动redis 服务[如果 ...
- MVC 树节点Table格式授权
这几夜心里颇不平静, 奈何 JS水平有限,前台效果耗时四天,后台传值一天,直至昨夜丑时测试初步完成,其实就是一个给tree来授权,网上开源的插件很多,如treejs.easyui 等等,只是这里授权稍 ...