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. Video Reviews

    题目链接:http://codeforces.com/gym/101755/problem/K 题目理解: 一家公司想让n个人给他们的产品评论,所以依次去找这n个人,第i个人会评论当且仅当已经有ai个 ...

  2. 割点 —— Tarjan 算法

    由于对于这一块掌握的十分不好,所以在昨天做题的过程中一直困扰着我,好不容易搞懂了,写个小总结吧 qwq~ 割点 概念 在无向连通图中,如果将其中一个点以及所有连接该点的边去掉,图就不再连通,那么这个点 ...

  3. P5025 [SNOI2017]炸弹

    原题链接  https://www.luogu.org/problem/P5025 闲话时刻: 第一道 AC 的黑题,虽然众人皆说水... 其实思路不是很难,代码也不是很难打,是一些我们已经学过的东西 ...

  4. 【知识点】Java机密

    Java添加PDF图章.动态图章 主要实现以下功能: 添加图片图章.即通过加载现有的图章(以图片形式),添加到PDF指定页面位置 添加动态图章.即加载PDF文档,并在动态的添加印章内容,包括印章字样. ...

  5. 14.LAMP服务 Linux Apache Mysql Php和防护机制 xinetd、tcp wapper

    一.安装LAMP服务 Linux Apache Mysql Php       要求操作系统支持 php解析 apache调用php插件解析 phpmyadmin       yum install ...

  6. 关于Delphi中二维数组的声明和大小调整

    这是一个实例: procedure TMainForm.Button1Click(Sender: TObject);var  arr:array of array of string;begin  s ...

  7. js怎么模拟点击网页元素

    在测试页面中,引入jquery源文件,并添加一个div标签,一个a标签,为了演示效果a标签暂时不添加地址 通过jquery为div标签绑定一个点击事件,这个事件是被动执行的.意思是要点击才会触发的 在 ...

  8. Docs-.NET-C#-指南-语言参考-关键字-值类型-：浮点数值类型

    ylbtech-Docs-.NET-C#-指南-语言参考-关键字-值类型-:浮点数值类型 1.返回顶部 1. 浮点数值类型(C# 引用) 2019/10/22 “浮点类型”是“简单类型”的子集,可以使 ...

  9. VsCode写Python代码！这代码简直和大神一样规范！太漂亮了！

    VsCode写Python代码!这代码简直和大神一样规范!太漂亮了!    转 https://www.jianshu.com/p/636306763d89 VsCode虽然没有Pycharm的功能齐 ...

  10. openresty开发系列25--openresty中使用json模块

    openresty开发系列25--openresty中使用json模块 web开发过程中,经常用的数据结构为json,openresty中封装了json模块,我们看如何使用 一)如何引入cjson模块 ...