手机端可拖动控件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>Title</title>
    <style>
        #someElm {
            width: 100px;
            height: 100px;
            background: #ccc;
            position: absolute;
        }
    </style>
     
</head>
 
<body>
   
<header>
       
</header>
<div id="main">
    <div id="someElm">
    </div>
</div>
   
<footer>
       
</footer>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
 <!-- <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>-->
<script>
    $('#someElm').bind('touchmove', function (e) {
        e.preventDefault();
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        var elm = $(this).offset();
        var x = touch.pageX;
        var y = touch.pageY;
//防止跑出屏幕

if((x+100)>api.winWidth){
x = api.winWidth - 100
}
if(x<0){
x = 100
}
if((y+100)>api.winHeight){
y = api.winHeight - 100
}
if(y<0){
y = 100
}


        $(this).css('left', x + 'px');
        $(this).css('top', y + 'px');
        console.log(touch.pageY + ' ' + touch.pageX);
    });
</script>
</body>
</html>

 

posted @ 2019-05-28 11:01  怪咖咖  阅读(200)  评论(0)  编辑  收藏  举报