<!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. Excel字符串连接

    1.利用&连接. ="('"&A4&"','"&B4&"','"&C4&" ...

  2. js 同for一样效果 (延迟)每秒循环一次 追加

    <script type="text/javascript"> var j = 1;        var timeID = null;        function ...

  3. iOS开发常用代码块（2）

    GCD定时器 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0); dispa ...

  4. laravel cookie写入

            $cookie = cookie('cookie_name', 'value', 5);        $data = ['title'=>'hello world'];     ...

  5. yii2 的request get pos请求 基本用法示例

    yii2好久没用了, 基本的都快忘了,赶紧记录一下. 1.普通的get和pst请求 $request = Yii::$app->request; $get = $request->get( ...

  6. [教训] windows 电脑的垃圾文件清理...

    坑你没商量! 这个名叫 “清除系统垃圾.bat“ 的文件在网上传播很广,但是,却出现了错误的版本,如果按照它逐条执行,将导致系统文件夹被一锅端,只能再重装的悲剧! 举个栗子: 错误版本:http:// ...

  7. Leetcode 详解（股票交易日）（动态规划DP）

    问题描述: 在股市的交易日中,假设最多可进行两次买卖(即买和卖的次数均小于等于2),规则是必须一笔成交后进行另一笔(即买-卖-买-卖的顺序进行).给出一天中的股票变化序列,请写一个程序计算一天可以获得 ...

  8. 动态拼接linq 使用Expression构造动态linq语句

    最近在做动态构造linq语句,从网上找了很多,大多数,都是基于一张表中的某一个字段,这样的结果,从网上可以搜到很多.但如果有外键表,需要动态构造外键表中的字段,那么问题来了,学挖掘机哪家强?哦,不是, ...

  9. WHMCS成功安装和使用方法及添加支付宝,PayPal收款教程

    一.WHMCS安装前准备 1.WHMCS官网: 1.官方首页:http://www.whmcs.com/ 2.WHMCS需要安装在一个带MysqL数据库的PHP服务器中,一般地我们日常安装的VPS控制 ...

  10. mysql-front导出数据库字典

    直接导出HTML,然后打开HTML最后直接复制到word就可以了!!!之前一直在找navicat如何导出数据字典.现在发现就是这样就可以了!