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. 2017.10.6 国庆清北 D6T1 排序

    题目描述 小Z 有一个数字序列a1; a2; .... ; an,长度为n,小Z 只有一个操作:选 定p(1<p<n),然后把ap 从序列中拿出,然后再插⼊到序列中任意位置. 比如a 序列 ...

  2. 【一起来烧脑】一步学会HTML体系

    [外链图片转存失败(img-zk4xNuy1-1563431241992)(https://upload-images.jianshu.io/upload_images/11158618-4e9cac ...

  3. Xtrabackup--备份mysql

    Xtrabackup介绍 Xtrabackup是由percona开源的免费数据库热备份软件,它能对InnoDB数据库和XtraDB存储引擎的数据库非阻塞地备份(对于MyISAM的备份同样需要加表锁): ...

  4. Django连接MySQL（二）

    1.首先我们需要创建好项目 2.安装MySQL数据库 3.setting中修改database设置 DATABASES = { 'default': { 'ENGINE': 'django.db.ba ...

  5. package.json 字段说明

    以vue的package.json为例: { // 名称 "name": "vue", // 版本 "version": "2.6 ...

  6. 似然函数 | 最大似然估计 | likelihood | maximum likelihood estimation | R代码

    学贝叶斯方法时绕不过去的一个问题,现在系统地总结一下. 之前过于纠结字眼,似然和概率到底有什么区别?以及这一个奇妙的对等关系(其实连续才是f,离散就是p). 似然函数 | 似然值 wiki:在数理统计 ...

  7. win7 激活码 秘钥

    019.06最新windows7旗舰版系统激活码: 目前市面上的win7旗舰版激活码大部分都已经过期或失效了,下面来分享一些最新的. win7旗舰版激活密钥: BG2KW-D62DF-P4HY6-6J ...

  8. Linux系列 | Ubuntu 各版本号和名称对照【转】

    转载处:https://blog.csdn.net/songfulu/article/details/85310273   版本 开发代号 中译 发布日期 支持结束时间 内核版本 桌面版 服务器版 4 ...

  9. [转]EXCEL截取字符串中某几位的函数——LeftMIDRight及Find函数的使用

    原文地址:http://blog.sina.com.cn/s/blog_3f136a180102ymq5.html EXCEL截取字符串中某几位的函数 ——Left MID Right及Find函数的 ...

  10. [原][资料整理][osg]osgDB文件读取插件，工作机制，支持格式，自定义插件

    参考: osgPlugins相关 osg读取文件的原理(插件工作机制) 当使用osgDB读取文件时,会自动根据文件的扩展名来到插件目录中寻找相应的插件,来实现. 比如: osgviewer cow.o ...