手机端网页:可拖拽悬浮按钮

<style type="text/css">

    #touch {
        width: 60px;
        height: 60px;
        position: absolute;
        right: 25px;
        bottom: 20px;
        margin-left: -30px;
        margin-bottom: -30px;
        z-index: 99999;
    }
style>

<div id="touch" style="width: 60px; height: 60px; position: absolute;">
    <img src="/img/touch.png" style="width: 60px; height: 60px;" />
div>

<script>

    // 最好放在DIV下方,避免DIV没有加载完,获取不到
    $('#touch').on('touchmove', function(e) {

        // 阻止其他事件
        e.preventDefault();

        // 判断手指数量
        if (e.originalEvent.targetTouches.length == 1) {

            // 将元素放在滑动位置
            var touch = e.originalEvent.targetTouches[0];  

            $("#touch").css({'left': touch.pageX + 'px',
                'top': touch.pageY + 'px'});
        }
    });
script>

你可能感兴趣的:(移动开发)