<!doctype html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>手机拖动</title>

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

</head>

<style>*{margin: 0;padding: 0;}</style>

<body>

<div id="my" style="width:100px; height:100px; background:#999; position:absolute;">out</div>

</body>

</html>

<script type="text/javascript">

var my=document.getElementById("my");

my.addEventListener("touchstart",function(e){

var e=e||window.event;

e.preventDefault();

})

my.addEventListener("touchmove",function(e){

var e=e||window.event;

e.preventDefault();

this.style.left=e.touches[0].clientX-50+"px";

this.style.top=e.touches[0].clientY-50+"px";

})

</script>

移动端div移动的更多相关文章

  1. CSS+HTML实现移动端div左右滑动展示

    由于手机屏幕的宽度有限,内容太多移动设备一行装不下的,所以很多移动端网站的导航栏都有左右滑动效果,下面我就用CSS+HTML实现移动端div左右滑动展示. CSS:box设置文本不换行,子元素box1 ...

  2. JS 设置盒子div 跳转

    方式一 window.location.href=”url”; 在当前窗口跳转 方式二 window.open(‘url’) 在新窗口跳转 window.open(‘url’,’_self’) 在当前 ...

  3. 转载：移动端+微信小程序实现，手机端滑动分页代码思路（ajax）

    //一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面//实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加 ...

  4. 开发移动端web页面click事件失效问题

    这两天在做一个WAP页面,在chrome上模拟移动端的时候,都好好的,然而放到手机上测试时, 发现有些点击事件直接无反应,但是有些有反应: 难道是由于我页面上有用到滚动插件,里面的touch事件的pr ...

  5. 移动端触发touchend后阻止click事件

    // vue里面简单的处理方式,可以同时兼容PC和移动端 <div @touchend.stop.prevent="doSomething" @click.stop.prev ...

  6. 手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明

    by 郑州seo on 2013 年 7 月 6 日 in jquery, 网站建设 with 6 Comments 最近需要做一个手机小门户网站,因为目前主流的手机都是安卓和苹果的,他们的浏览器内核 ...

  7. HTML入门基础教程相关知识

    HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...

  8. AspNetCoreApi 跨域处理

    AspNetCoreApi 跨域处理 如果咱们有处理过MV5 跨域问题这个问题也不大. (1)为什么会出现跨域问题:  浏览器安全限制了前端脚本跨站点的访问资源,所以在调用WebApi 接口时不能成功 ...

  9. 开发Canvas 绘画应用（四）：实现拖拽绘画

    在开发Canvas绘画应用(三):实现对照绘画中,我们实现了视图引导的第一部分,这一篇我们来完成第二部分,即将图片直接拖到画布上进行绘画. ✁ 拖放如何实现? [拖放的基本概念]:创建一个绝对定位的元 ...

随机推荐

  1. IOS开发之GCD---dispatch_semaphore

     信号量是一个整形值并且具有一个初始计数值,并且支持两个操作:信号通知和等待.当一个信号量被信号通知,其计数会被增加.当一个线程在一个信号量上等待时,线程会被阻塞(如果有必要的话),直至计数器大于零, ...

  2. 命令行导入mysql数据

    找到mysql安装目录(bin) 进入mysql mysql -u root -p 123 选中数据库 use 数据库名 导入sql  source sql数据库路径

  3. 当父级是body时，子元素设置position：absolute；定位是根据body还是html呢？

    position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...

  4. Virtualbox安装USB2.0/3.0

    系统:Ubuntu16.04 软件:Virtualbox5.1 1.打开Virtualbox,不启动虚拟系统. 2.点击设置->USB->启动usb2.0. 3.若发现不能启用,则到官网下 ...

  5. CentOS 程序开机自启动方法总结

    1.把启动程序的命令添加到/etc/rc.d/rc.local文件中 CentOS系统下管理开机自启动的配置文件是/etc/rc.d/rc.local,所以只需编辑这个文件,在里面加入相应的启动命令即 ...

  6. Sprint1（第四天11.17）

    Sprint1第一阶段 1.类名:软件工程-第一阶段 2.时间:11.14-11.23 3.选题内容:web版-餐厅到店点餐系统 4.团队博客地址: http://www.cnblogs.com/qu ...

  7. css新增样式

    一. box-shadow(阴影效果)使用:box-shadow: 20px 10px 0 #000;-moz-box-shadow: 20px 10px 0 #000;-webkit-box-sha ...

  8. 20169212《Linux内核原理与分析》 第十周作业

    云课堂回顾学习 1. 进程调度的时机 中断处理过程(包括时钟中断.I/O中断.系统调用和异常)中,直接调用schedule(),或者返回用户态时根据need_resched标记调用schedule() ...

  9. Windows Store App 音频和视频

    在Windows应用商店应用中提供了MediaElement控件,该控件能为应用提供音频和视频播放功能.就像之前提到的,虽然在多媒体应用开发中,开发人员可以自行开发一套音频.视频编解码规范和开发媒体播 ...

  10. 通过JS检测360浏览器

    如何通过JS检测360浏览器? 尝试了一大堆方法,网上大多数办法都是通过navigator.userAgent来判断,这可能在几年前是行得通的,现在360userAgent输出来跟谷歌除了版本号其余一 ...