WEB 手机版拖拽 

<!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 ) ;
 
        //开始
        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>

 

posted @ 2015-05-06 21:02  Zion0707  阅读(347)  评论(0)    收藏  举报