<!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. 谷歌IAP：skusBundle array associated with key ITEM_ID_LIST cannot contain more than 20 items.

    这几天在接谷歌的支付,在拉谷歌商品列表的时候转菊花,长时间不返回(querySkuDetails),一开始以为因为IAP有key不对导致的,查了下发现没有问题. 再看logcat,发现了这行: Inp ...

  2. jQuery手风琴制作

    jQuery手风琴制作 说起手风琴,想必大家应该都知道吧,简单的来说就是可以来回收缩的这么一个东西,接下来,我就给大家演示一下用jQuery制作一个手风琴菜单! 写jQuery前,我们需要引用一个jQ ...

  3. 第 7 章 MySQL 数据库锁定机制

      前言: 为了保证数据的一致完整性,任何一个数据库都存在锁定机制.锁定机制的优劣直接应想到一个数据库系统的并发处理能力和性能,所以锁定机制的实现也就成为了各种数据库的核心技术之一.本章将对 MySQ ...

  4. 以太坊RLP用法-go-ethereum学习

    RLP (递归长度前缀)提供了一种适用于任意二进制数据数组的编码,RLP已经成为以太坊中对对象进行序列化的主要编码方式.RLP的唯一目标就是解决结构体的编码问题:对原子数据类型(比如,字符串,整数型, ...

  5. Linux常用命令说明（记录自己Linux命令使用情况，后续会持续更新）

    首次记录时间--20170602 感觉自己Linux命令使用掌握的情况非常差,今天先记录当前会的几个. 1#cd(change directory) 切换工作目录(或者叫修改当前目录) eg. cd ...

  6. Range Modular Queries

    Range Modular Queries 题意 给出一个数列,q个查询,问查询区间内有几个数 a[i] % x == y. 分析 其实裸的分块就能过了,跑的还特别快. 这里分块的作用就是排序. 在x ...

  7. 抓包工具-Wireshark（详细介绍与TCP三次握手数据分析）

    功能使用的详细介绍 wireshark(官方下载网站: http://www.wireshark.org/),是用来获取网络数据封包,可以截取各种网络封包,显示网络封包的详细信息,包括http,TCP ...

  8. 封装TableView有可能用到的数据结构和UITableViewCell的一个继承类

    最近4年的时间,我已经做了5个App完全独立开发, 工作经历5个App, 维护了两个App. 在这期间用的最多的是UITableView, 因此也有许多感觉可以封装的. 现在就是我封装的. RXCel ...

  9. Elasticsearch文档查询

    简单数据集 到目前为止,已经了解了基本知识,现在我们尝试用更逼真的数据集,这儿已经准备好了一份虚构的JSON,关于客户银行账户信息的.每个文档的结构如下: { , , "firstname& ...

  10. Java之IO流详解

    IO流 Input/Output 完成输入/输出 应用程序运行时——数据在内存中  ←→ 把数据写入硬盘(磁带)  内存中的数据不可持久保存的  输入:从外部存储器(硬盘.磁带.U盘)把数据读入内存. ...