移动端图标拖动并获取移动后的坐标

这两天在做关于合同盖章的需求,要求在移动端能拖动章,并获取章的坐标。在网上也看了一些相关代码,最后整理出一份demo。整理的匆忙,代码仍存在bug,当第一次移动章手指抬起后,再次点击一下章,坐标将改变,这点后期仍待改进。

$(function(){
                var cirX=0;//圆心X横坐标
                var cirY=0;//圆心Y纵坐标
                var moveX=0;//移动中触点X横坐标
                var moveY=0;//移动中触点Y纵坐标
                var boxW=$(".box").width();//章宽
                var boxH=$(".box").height();//章高
//              console.log(boxW+" "+boxH);
                //半章宽,半章高
                var halfW=$(".box").width()/2;
                var halfH=$(".box").height()/2;
//                console.log(halfW+" "+halfH);
                var conW=$(".con").width();//con宽
                var conH=$(".con").height();//con高
//              console.log(conW+" "+conH);
                var conX=0;//距离左边屏幕距离
                var conY=0;//距离顶部距离
                conX=$(".con").offset().left;//距离左边屏幕距离
                conY=$(".con").offset().top;//距离顶部距离
//              console.log(conX+" "+conY);

                $(".con").on(‘touchstart‘,function(e){
                    var move_left = e.originalEvent.targetTouches[0].pageX; //获取触点X横坐标
                    var move_top = e.originalEvent.targetTouches[0].pageY; //获取触点Y纵坐标
                });
                $(".con").on(‘touchmove‘,function(e){
//                    e.preventDefault();
                    moveX=e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标
                    moveY=e.originalEvent.targetTouches[0].pageY;//移动过程中Y轴的坐标
//                    console.log(moveX +‘|‘+ moveY);
                    cirX=moveX-conX-halfW;
                    cirY=moveY-conY-halfH;
//                    console.log(cirX +‘|‘+ cirY);

//                    判断
                    if(cirX<0){
                        cirX = 0;
                    }
                    if(cirX>conW-boxW){
                        cirX = conW-boxW;
                    }
                    if(cirY<0){
                        cirY = 0;
                    }
                    if(cirY>conH-boxH){
                        cirY = conH-boxH;
                    }
                    $(".box").css({
                        "left":cirX,
                        "top":cirY,
                       })
                });
                $(".con").on(‘touchend‘,function(e){
                    cirX=cirX+halfW;
                    cirY=conH-(cirY+halfH);
                    console.log(cirX +‘|‘+ cirY);
                });
            })

<div class="con">  <div class="box"></div>  <img src="images/eg.png" class="imgShow"/></div>
.con{
	width: 300px;
	height: 400px;
	overflow: hidden;
	border: 1px solid orange;
	margin: 10px auto 0;
	position: relative;
	text-align: center;
}
.box{
	width: 60px;
	height: 60px;
	background: red;
	opacity: .6;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	z-index: 10;
}
.imgShow{
	max-width: 100%;
	height: auto;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
}

原文地址:https://www.cnblogs.com/hdkou/p/9568429.html

时间: 2024-10-18 20:00:14

移动端图标拖动并获取移动后的坐标的相关文章

Extjs4.2 Desktop 桌面图标拖动白屏的解决

上次做了个extjs4.2的desktop桌面demo,把desktop从原始包中剥离出来,并实现了桌面图标换列,桌面图标拖动,但用户反映桌面图标拖动会出现白屏,经测试,在 extjs4.2和Extjs5.0中都存在这个问题, 经反复跟踪调试,发现自己增加的代码并没有问题,问题出在extjs的自定义class里面, 在extjs4.1的  Ext.define('Ext.dd.DragZone' ...的定义中 有 afterRepair : function(){ var me = this;

【javascript】js 获取 url 后的参数值

以前写过一篇类似的博文(提取 url 的搜索字符串中的参数),但是个人觉得使用起来不是很方便,今天抽空重新写了个函数,该函数代码更加简洁. //获取 url 后的参数值 function getUrl(para){ var paraArr = location.search.substring(1).split('&'); var paraObj = {}; for(var i = 0;k = paraArr[i];i++){ paraObj[k.substring(0,k.indexOf('=

Ajax获取数据后append追加到表格内出现格式混乱的错误

Ajax获取数据后append追加到表格内出现追加的数据与表格风格不同的错误: $("#courierTable").append("<tr style='text-align: center'> class='tab-content'") $("#courierTable").append("<tr style='text-align: center'> class='tab-content'") $

Jquery插件 防刷新倒计时 “点击获取验证码后60秒内禁止重新获取

Jquery插件实现"点击获取验证码后60秒内禁止重新获取(防刷新)" 效果图: 先到官网(http://plugins.jQuery.com/cookie/)下载cookie插件,放到相应文件夹,代码如下: 1 <style type="text/css"> 2 * {margin: 0; 3 padding: 0; 4 font-family: "Microsoft Yahei"; 5 } 6 .captcha-box { 7 w

JS获取渲染后的样式

一般我们利用element.style.属性来获取CSS的样式,而此方法只能获取标签内的样式,无法获取头部或引入的样式,因此,而我们又需要获取其样式,则我们可以使用:(其中element为标签,proName为属性)document.defaultView.getComputedStyle(element)[proName]的方法获其样式,而此方法不支持IE6~IE8,因此我们针对IE8以下的使用element.currentStyle[proName] 我们可以通过下面方法使其兼容 1 /*

获取分组后取某字段最大一条记录

获取分组后取某字段最大一条记录 方法一:(效率最高) select * from test as a where typeindex = (select max(b.typeindex) from test as b where a.type = b.type );

获取分组后的TOP 1和TOP N记录

MySQL获取分组后的TOP 1和TOP N记录 有时会碰到一些需求,查询分组后的最大值,最小值所在的整行记录或者分组后的top n行的记录,在一些别的数据库可能有窗口函数可以方面的查出来,但是MySQL没有这些函数,没有直接的方法可以查出来,可通过以下的方法来查询. 准备工作 测试表结构如下: root:test> show create table test1\G *************************** 1. row *************************** T

JS-DOM:获取计算后的样式(同时兼容IE跟其他浏览器)

HTML部分 <div id="div1" style="">打发第三方</div> CSS部分 <style type="text/css">#div1{    height: 100px;    width: 100px;    font-size: 12px;    background-color: #ccc;}</style> JS部分 方法一: <script> window

ListView在编辑状态下不能获取修改后的值,无法更新数据

ListView在编辑状态下不能获取修改后的值,获取到的总是以前的值解决方法:在page_load事件里写: if(!IsPostBack) { ListViewBind(); } 原因:这涉及到aspx页各事件的执行顺序,因为如果没有判断IsPostBack,每次点更新时page_load都会去执行ListViewBind(),对ListView进行重新绑定,那你再去获取ListView里的值时当然就是以前的值了,这样写后ListView没有被重新绑定,里面的数据就还是以前的,所以就可以获取到