您的位置：首页 > 其它

WEB 手机版拖拽

2015-05-06 21:02 190 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title></title>
</head>
<style>
html,body{
width:100%;
height:100%;
overflow: hidden;
}
html ,
body,
div{
padding:0;
margin:0;
}
#drag{
width:100px;
height:100px;
background:pink;
-webkit-transform:translate3d(0px,0px,0px);
}
</style>
<body>

<div id="drag"></div>

<script>

function dragMove( obj ){

var oDrag = document.querySelector( obj ) , startX , startY , offsetX , offsetY ;

//开始
var dragStart = function( event ){
//阻止冒泡行为
event.stopPropagation();
//把当前获取的位置进行处理
var nowLocation = window.getComputedStyle(oDrag , null)['-webkit-transform'].replace(/[a-z()]/g , '');
var nowLocationArr = nowLocation.split(',');

//起始值 减去 位置值 等于 当前值
this.startX = event.touches[0].pageX - nowLocationArr[4];
this.startY = event.touches[0].pageY - nowLocationArr[5];

}
//移动
var dragMove = function( event ){
//阻止冒泡及默认行为
event.stopPropagation();
event.preventDefault();

if ( event.targetTouches.length == 1 ) {
//移动的 x 和 y 值
this.offsetX = event.targetTouches[0].pageX - this.startX;
this.offsetY = event.targetTouches[0].pageY - this.startY;

//DIV 块活动区域
var clientX = document.body.clientWidth - window.getComputedStyle( this , null )['width'].replace('px','');
var clientY = document.body.clientHeight - window.getComputedStyle( this , null )['height'].replace('px','');

if ( this.offsetX < 0 ) {
this.offsetX = 0;
}else if ( this.offsetX > clientX ) {
this.offsetX = clientX;
}

if ( this.offsetY < 0 ) {
this.offsetY = 0;
}else if ( this.offsetY > clientY ) {
this.offsetY = clientY;
}

this.style['-webkit-transform'] = 'translate3d( '+ this.offsetX +'px , '+ this.offsetY +'px , 0px)';
}
}

//监听事件
oDrag.addEventListener('touchstart' , dragStart );
oDrag.addEventListener('touchmove' , dragMove);
}

//调用
dragMove('#drag');

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航