html5拖拽实现
1.需求
做一个h5正方形的拖拽框
2.分析
使用touchstart,touchmove,touchend这3个事件实现.
需要记录的数据有三组数据,分别是下图的(x0,y0),(x1,y1),(x2,y2)。A点表示最开始的点击位置
3.代码实现
下面是html和css部分,很简单的一部分
<style>
#outer{
position: relative;
width: 300px;
height: 300px;
background: green;
}
#inner{
position: absolute;
left: 0;
top:0;
width: 100px;
height: 100px; background: red;
}
</style> <div id="outer">
<div id="inner">
</div>
</div>
下面是js代码实现部分
记得要引入jq库哦!~
<script src="jquery-1.7.2.min.js"></script>
<script> var outer =document.getElementById('outer');
var inner =document.getElementById('inner'); var move={
sLeft:0,
sTop:0,
curLeft:0,
curTop:0,
startX:0,
startY:0,
makeMove:function(e){
var e= e || window.event;
var touch =e.changedTouches[0];
var x=touch.clientX;
var y=touch.clientY; l = x - this.sLeft;
t = y - this.sTop; //边界判断最小值 l = l<0?0:l;
t = t<0?0:t;
//边界判断最da值
var maxLeft = 300-100;
var maxTop = 300-100; l = l>maxLeft ?maxLeft:l;
t = t>maxTop?maxTop:t; move.curLeft = l;
move.curTop = t;
$('#inner').css({
'left':move.curLeft +'px',
'top':move.curTop+'px'
}) }
}
inner.addEventListener('touchstart',function(e){
//获得初始坐标
var e= e || window.event;
var touch =e.changedTouches[0];
var x=touch.clientX;
var y=touch.clientY; //对象属性赋值
move.sLeft = x-move.curLeft;
move.sTop = y-move.curTop;
move.startX=x;
move.startY=y; $('#inner').css({
'left':move.curLeft+'px',
'top':move.curTop+'px'
})
},false); inner.addEventListener('touchmove',function(e){
//获得坐标
var e= e || window.event;
var touch =e.changedTouches[0];
var x=touch.clientX;
var y=touch.clientY; //获得偏移的值
move.makeMove(e); },false); inner.addEventListener('touchend',function(e){ },false); </script>
html5拖拽实现的更多相关文章
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
- html5拖拽
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- HTML5 拖拽复制功能的实现方法
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- 基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- html5拖拽总结
拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...
- HTML5拖拽实例
最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...
- html之div拖拽,html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
随机推荐
- SSH项目与SSM项目的进入首页的方法
SSH项目中: jsp页面一般都是存放在WEB-INF下面的目录下,这样我们就不能直接访问到这些jsp页面了,保证了页面的安全性. 在struts的管理中,是利用action来实现页面的跳转,进入in ...
- 使用css3进行增强
使用css3进行增强 1,为元素创建圆角 border-radius:25px; .about img{ border: 5px solid #bebebe; float: left; margi ...
- /MT、/MD编译选项,以及可能引起在不同堆中申请、释放内存的问题
一.MD(d).MT(d)编译选项的区别 1.编译选项的位置 以VS2005为例,这样子打开: 1) 打开项目的Property Pages对话框 2) 点击左侧C/C ...
- 药企信息sop
中国药品生产企业 http://db.yaozh.com/shengchanqiye 全球药品生产企业 http://db.yaozh.com/quanqiuqiye
- Runner站立会议02
开会时间:21.10~21.30 地点:二教103 今天做了什么:学习五大布局的使用方法 明天准备做什么:学习数据的存储 遇到的困难:知识点太多,信心受挫 站立会议图: 燃尽图:
- osharpV3数据库初始化
var databaseInitializer = new DatabaseInitializer(); databaseInitializer.MapperAssemblyFinder = new ...
- Using Friendly URLs in ASP.NET Web Forms
Introduction Websites often need to generate SEO friendly URLs. In ASP.NET Web Forms applications, a ...
- Python Web Crawler
Python版本:3.5.2 pycharm URL Parsing¶ https://docs.python.org/3.5/library/urllib.parse.html?highlight= ...
- jQ控制前端输入用户为空是的提醒
1.在jQ中$(function(){})函数的意思是 $(document).ready(function(){}) 的简写,用来在DOM加载完成之后执行一系列预先定义好的函数 placeholde ...
- android控件库(2)-仿Google Camera 的对焦效果
一直很喜欢Google Camera的自动对焦效果,今日闲来无事,自己做了个: 废话不多说,代码才是王道: package com.example.test.view; import com.exam ...