移动端div移动
<!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移动的更多相关文章
- CSS+HTML实现移动端div左右滑动展示
由于手机屏幕的宽度有限,内容太多移动设备一行装不下的,所以很多移动端网站的导航栏都有左右滑动效果,下面我就用CSS+HTML实现移动端div左右滑动展示. CSS:box设置文本不换行,子元素box1 ...
- JS 设置盒子div 跳转
方式一 window.location.href=”url”; 在当前窗口跳转 方式二 window.open(‘url’) 在新窗口跳转 window.open(‘url’,’_self’) 在当前 ...
- 转载：移动端+微信小程序实现，手机端滑动分页代码思路（ajax）
//一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面//实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加 ...
- 开发移动端web页面click事件失效问题
这两天在做一个WAP页面,在chrome上模拟移动端的时候,都好好的,然而放到手机上测试时, 发现有些点击事件直接无反应,但是有些有反应: 难道是由于我页面上有用到滚动插件,里面的touch事件的pr ...
- 移动端触发touchend后阻止click事件
// vue里面简单的处理方式,可以同时兼容PC和移动端 <div @touchend.stop.prevent="doSomething" @click.stop.prev ...
- 手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明
by 郑州seo on 2013 年 7 月 6 日 in jquery, 网站建设 with 6 Comments 最近需要做一个手机小门户网站,因为目前主流的手机都是安卓和苹果的,他们的浏览器内核 ...
- HTML入门基础教程相关知识
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
- AspNetCoreApi 跨域处理
AspNetCoreApi 跨域处理 如果咱们有处理过MV5 跨域问题这个问题也不大. (1)为什么会出现跨域问题: 浏览器安全限制了前端脚本跨站点的访问资源,所以在调用WebApi 接口时不能成功 ...
- 开发Canvas 绘画应用（四）：实现拖拽绘画
在开发Canvas绘画应用(三):实现对照绘画中,我们实现了视图引导的第一部分,这一篇我们来完成第二部分,即将图片直接拖到画布上进行绘画. ✁ 拖放如何实现? [拖放的基本概念]:创建一个绝对定位的元 ...
随机推荐
- 老王讲自制RPC框架.(三.ZOOKEEPER）
(#)定义Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配 ...
- Alpha版本十天冲刺--Day6
会议总结 队员 今天完成 遇到的问题 明天要做 感想 鲍亮 获取帖子接口,url图片解析 无 获取帖子详情接口,发帖接口 这两天都是白天睡大觉,晚上敲代码,感觉得调一下作息了,假期更加爱赖床了,还得继 ...
- JQuery实现table分页
1.直接贴代码: ; //每页显示的记录条数 ; //显示第curPage页 var len; //总行数 var page; //总页数 $(function(){ len =$(; //去掉表头 ...
- d3 scale 学习笔记
讲解scale 的好材料 https://www.dashingd3js.com/d3js-scales
- 2014——>2015，我的薪资依然是4.5
悄悄的,2014离开了,带走了我的青春中的一年.这一年,我才毕业,这一年,我又混掉了...... 总想写点什么,可真正到写的时候,却发现自己文笔是这样的不堪,也许是缺少锻炼的缘故,也许自己天生就不善言 ...
- document.all.wb.ExecWB
<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri=&quo ...
- js动态替换数据的点击事件
做项目时遇到的,具体是界面如下图:当点击X号时,出现删除.取消按钮,当点击删除时,这一行删除,当点击取消时又恢复到初始状态. 需要关注的问题是,js动态添加的删除.取消按钮的点击事件.当点击取消时恢复 ...
- struts下ajax提交与页面进行提示 返回值为null
@Override public String execute() throws Exception { if ("none".equals(task)) { ...
- 自定义动画css属性
自定义动画: 1.animation-name(自定义动画名称) 元素所应用的动画名称,必须与@keyframes使用,名称由@keyframes定义. keyframes(动画关键帧):以@keyf ...
- 汽车驱动之家 http://bmw360.cn
汽车驱动之家 http://bmw360.cn