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>