htm5手机端实现拖动图片
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手机端实现拖动图片的更多相关文章
- 适应手机端的jQuery图片滑块动画DEMO演示
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- Teamviewer 手机端怎么拖动窗口,选中文字
Teamviewer 手机端怎么拖动窗口,选中文字 Teamviewer 手机端拖动窗口,选中文字和触摸板的使用方式是一样的 点两下不松开就可以拖动 点两下不松开也可以选中文字 Teamviewer ...
- 适应手机端的jQuery图片滑块动画
一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式,可以有平移.翻 ...
- 一款手机端的jQuery图片滑块插件
今天我们要介绍一款比较特别的jQuery图片滑块插件,它不仅在PC浏览器上可以使用,而且更适合在手机端的网页中使用.这款jQuery插件不仅可以定义图片切换的方向,而且可以即时切换图片切换的动画方式, ...
- js实现双指缩放图片 手机端双指缩放图片
首先引入js文件,需要jq,pinchzoom.js.pinchzoom.js需要在jq环境下使用,可以 <meta name="viewport" content=&quo ...
- 手机端h5页面 图片根据手势放大缩小
pinchzoom.js 这个插件可以简单的实现这一功能 <div class="big_pos_img page"> <div class="pinc ...
- 使用localResizeIMG3+WebAPI实现手机端图片上传
前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...
- megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题
最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...
- 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件
当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...
随机推荐
- 10分钟用Python告诉你两个机器人聊天能聊出什么火花
欲直接下载代码文件,关注我们的公众号哦!查看历史消息即可! 现在不是讲各种各样的人工智能嘛,AI下棋,AI客服,AI玩家--其实我一直很好奇,两个AI碰上会怎样,比如一起下棋,一起打游戏-- 今天做个 ...
- 洛谷P2312解方程题解
题目 暴力能得\(30\),正解需要其他的算法操作,算法操作就是用秦九韶算法来优化. 秦九韶算法就是求多项式的值时,首先计算最内层括号内一次多项式的值,然后由内向外逐层计算一次多项式的值,然后就将求\ ...
- Flower(规律+逆向思维)
Flower: 传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6486 题解: 逆向思维+规律 因为每次剪n-1,所以逆向就是控制n-1朵不变,每次增高1 ...
- A. Vasya and Book ( Codeforces Educational Codeforces Round 55 )
题意:当前在看书的第 x 页,每次可以向前或者向后翻 d 页,这个书一共 n 页,问能否用最小操作翻到第 y 页. 题解:三种情况:1.直接翻能到的一定最短. 2.先翻到第一页,然后往后翻,翻到第 y ...
- Java GUI:将JPanel添加进JScrollPane
实现的目标: 因为在滚动框中含有很多个Java GUI 组件,因此这里采用JPanel面板包住这些组件,在用JScrollPane实现滚动 问题1:布局揉在一起 JPanel有自己默认的布局方式,因此 ...
- python mongo存在插入不存在更新,同时指定如果不存在才插入的字段
python爬虫的任务数据操作的小技巧 好久没写公众号了,最近太忙了,这里就不多说了.直接根据需求上代码,我想这个应该是大家比较喜欢的, 需求 爬取某网站的项目列表页,获取其url,标题等信息,作为后 ...
- VS2008下LibTomCrypt 1.17的编译和使用《转》
文章出处:http://blog.csdn.net/delphiwcdj/article/details/6298820 具体步骤如下: (1) 下载tomcrypt tomcrypt 1.17 VS ...
- JS数组常见方法的深浅拷贝分类
一.涉及浅拷贝类方法,会改变原数组 1,pop(): 删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值.如果数组已经为空,则 pop() 不 改变数组,并返 ...
- [原][landcover]全球地表植被样例图片
图由南水之源提供,感谢 流socket 制作总结 原截图如下:按字母顺序排序 asphalt asphalt_bright asphalt_white brightRockOnly broad ...
- ionic4 路由跳转、ionic4 路由跳转传值 NavController 返回上一页 、NavController 回到根
1.普通路由跳转 <ion-button [routerLink]="['/pinfo']"> 跳转到详情 </ion-button> <ion-he ...