htm5手机端实现拖动图片

<pre>

<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.someElm {
width:4rem;
height:4rem;

position:absolute;

}
.someElm1{
left:3%;top:10%;
background:#ccc;
}
.someElm2{
left:13%;top:25%;
background:#f00000;
}
.someElm3{
left:70%;top:10%;
background: #0B8E00;
}
</style>
</head>
<body>

<div class="someElm someElm1">
</div>
<div class="someElm someElm2">
</div>
<div class="someElm someElm3">
</div>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<!-- <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>-->
<script>
var chumodianposleft;
var chumodianpostop;
$('.someElm').bind('touchstart',function(e){
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
/*读取选中元素的绝对定位的值*/
var pianyi=$(this).offset();
/*选中的地方离元素的边距*/
chumodianposleft=touch.pageX-pianyi.left;
chumodianpostop=touch.pageY-pianyi.top;
})
$('.someElm').bind('touchmove',function(e){

var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
/*左上角为0,0*/

$(this).css('left',touch.pageX-chumodianposleft);
$(this).css('top',touch.pageY-chumodianpostop);
});
</script>
</body>
</html>
</pre>

下面的来个升级版的demo 拖动元素到中间的框里面 然后元素消失

<pre>
<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.someElm {
width:4rem;
height:4rem;

position:absolute;

}
.someElm1{
left:3%;top:10%;
background:#ccc;
}
.someElm2{
left:13%;top:25%;
background:#f00000;
}
.someElm3{
left:70%;top:10%;
background: #0B8E00;
}

.gudingceshi {
width:6rem;
height:6rem;
position:absolute;
left: 37%;
top: 47%;
background: #000;
}
</style>
</head>
<body>

<div class="someElm someElm1">
</div>
<div class="someElm someElm2">
</div>
<div class="someElm someElm3">
</div>
<div class="gudingceshi">
</div>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<!-- <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>-->
<script>

var chumodianposleft;
var chumodianpostop;
$('.someElm').bind('touchstart',function(e){
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
/*读取选中元素的绝对定位的值*/
var pianyi=$(this).offset();
/*选中的地方离元素的边距*/
chumodianposleft=touch.pageX-pianyi.left;
chumodianpostop=touch.pageY-pianyi.top;
})
$('.someElm').bind('touchmove',function(e){

var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

/*左上角为0,0*/
var x2=$('.gudingceshi').offset().left;
var y2=$('.gudingceshi').offset().top;
var w=$('.gudingceshi').width();
var h=$('.gudingceshi').height();
var ispengzhuang=isCollsion(touch.pageX,touch.pageY,x2,y2,w,h);
if(ispengzhuang){
$(this).remove();
}

$(this).css('left',touch.pageX-chumodianposleft);
$(this).css('top',touch.pageY-chumodianpostop);
});
</script>

<script>

/**
*
* @param x1 点
* @param y1 点
* @param x2 矩形view x
* @param y2 矩形view y
* @param w 矩形view 宽
* @param h 矩形view 高
* @return
*/
function isCollsion(x1,y1,x2,y2,w,h) {
if (x1 >= x2 && x1 <= x2 + w && y1 >= y2 && y1 <= y2 + h) {
console.log('碰撞');
return true;
}
console.log('没碰撞');
return false;
}
</script>
</body>
</html>
</pre>

htm5手机端实现拖动图片的更多相关文章

  1. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. Teamviewer 手机端怎么拖动窗口，选中文字

    Teamviewer 手机端怎么拖动窗口,选中文字 Teamviewer 手机端拖动窗口,选中文字和触摸板的使用方式是一样的 点两下不松开就可以拖动 点两下不松开也可以选中文字 Teamviewer ...

  3. 适应手机端的jQuery图片滑块动画

    一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式,可以有平移.翻 ...

  4. 一款手机端的jQuery图片滑块插件

    今天我们要介绍一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式, ...

  5. js实现双指缩放图片 手机端双指缩放图片

    首先引入js文件,需要jq,pinchzoom.js.pinchzoom.js需要在jq环境下使用,可以 <meta name="viewport" content=&quo ...

  6. 手机端h5页面 图片根据手势放大缩小

    pinchzoom.js 这个插件可以简单的实现这一功能 <div class="big_pos_img page"> <div class="pinc ...

  7. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  8. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  9. 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件

    当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...

随机推荐

  1. 10分钟用Python告诉你两个机器人聊天能聊出什么火花

    欲直接下载代码文件,关注我们的公众号哦!查看历史消息即可! 现在不是讲各种各样的人工智能嘛,AI下棋,AI客服,AI玩家--其实我一直很好奇,两个AI碰上会怎样,比如一起下棋,一起打游戏-- 今天做个 ...

  2. 洛谷P2312解方程题解

    题目 暴力能得\(30\),正解需要其他的算法操作,算法操作就是用秦九韶算法来优化. 秦九韶算法就是求多项式的值时,首先计算最内层括号内一次多项式的值,然后由内向外逐层计算一次多项式的值,然后就将求\ ...

  3. Flower(规律+逆向思维）

    Flower: 传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6486 题解: 逆向思维+规律 因为每次剪n-1,所以逆向就是控制n-1朵不变,每次增高1 ...

  4. A. Vasya and Book ( Codeforces Educational Codeforces Round 55 )

    题意:当前在看书的第 x 页,每次可以向前或者向后翻 d 页,这个书一共 n 页,问能否用最小操作翻到第 y 页. 题解:三种情况:1.直接翻能到的一定最短. 2.先翻到第一页,然后往后翻,翻到第 y ...

  5. Java GUI：将JPanel添加进JScrollPane

    实现的目标: 因为在滚动框中含有很多个Java GUI 组件,因此这里采用JPanel面板包住这些组件,在用JScrollPane实现滚动 问题1:布局揉在一起 JPanel有自己默认的布局方式,因此 ...

  6. python mongo存在插入不存在更新，同时指定如果不存在才插入的字段

    python爬虫的任务数据操作的小技巧 好久没写公众号了,最近太忙了,这里就不多说了.直接根据需求上代码,我想这个应该是大家比较喜欢的, 需求 爬取某网站的项目列表页,获取其url,标题等信息,作为后 ...

  7. VS2008下LibTomCrypt 1.17的编译和使用《转》

    文章出处:http://blog.csdn.net/delphiwcdj/article/details/6298820 具体步骤如下: (1) 下载tomcrypt tomcrypt 1.17 VS ...

  8. JS数组常见方法的深浅拷贝分类

    一.涉及浅拷贝类方法,会改变原数组 1,pop():   删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值.如果数组已经为空,则 pop() 不 改变数组,并返 ...

  9. [原][landcover]全球地表植被样例图片

    图由南水之源提供,感谢    流socket  制作总结 原截图如下:按字母顺序排序 asphalt asphalt_bright asphalt_white brightRockOnly broad ...

  10. ionic4 路由跳转、ionic4 路由跳转传值 NavController 返回上一页 、NavController 回到根

    1.普通路由跳转 <ion-button [routerLink]="['/pinfo']"> 跳转到详情 </ion-button> <ion-he ...