<!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. HTML <a> download 属性,点击链接来下载图片

    Html5里面的 标签的 Download 属性可以设置一个值来规定下载文件的名称.所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, ...

  2. [SoapUI] 在SoapUI里用Java语言判断Excel单元格为空或者Null时出错

    我取Excel数据时先判断cell是否为"": if(cellValue != ""){     listNumber.add(i);     cellValu ...

  3. unity自带寻路Navmesh入门教程（二）

    上一节简单介绍了NavMesh寻路的基本用法,这次来介绍一下稍微复杂一点点的高低落差以及跳跃的做法,首先来看看这次的目标:   由于博客相册上传GIF有限制,所以我把整个过程切开了2部分上传,第一部分 ...

  4. React 学习资源汇总（最全的 React 学习资料）

    http://www.360doc.com/content/16/1108/10/17722897_604827790.shtml

  5. java 计算 1到10 的 阶层的和（采用递归的方法）

    package hibernate; public class t { public static void main(String[] args) { System.out.println(jiec ...

  6. appium案例

    import unittest from time import sleep from appium import webdriver import desired_capabilities clas ...

  7. 收集C#常用类：自己写的一个DBHelper类

    随着学的东西越来越多,一点点的完善吧! using System; using System.Collections.Generic; using System.Linq; using System. ...

  8. htmlunit官网简易教程（翻译）

    1 环境搭建: 1)下载 从链接:http://sourceforge.net/projects/htmlunit/files/htmlunit/ 下载最新的bin文件 2)关于bin文件 里面主要包 ...

  9. SQL Server 日期转换到字符串

    0 Feb 22 2006 4:26PM CONVERT(CHAR(19),   CURRENT_TIMESTAMP, 0) 1 02/22/06 CONVERT(CHAR(8),   CURRENT ...

  10. [HTML/Javascript] JS判断IE浏览器各版本

    代码参考: function isLowIEVersion() { var browser = navigator.appName var b_version = navigator.appVersi ...