移动端拖动事件实现 

<!DOCTYPE html>
<head>
    <title>Drag and Drop Example</title>
    <meta charset="UTF-8">
    <style type="text/Css">
        body{background-color:#ccc;} 
        .target{position:relative;width:200px;height:200px;background: red;}
    </style>
</head>

<body>
    <div id="target" class="target">
        <h2>hello world</h2>
    </div>
    <script>
//初始化变量
    var oL, oT;
    var target = document.getElementById("target");
//添加事件监听
    target.addEventListener('touchstart', function(e) {
        var touches = e.touches[0];
        oL = touches.clientX - target.offsetLeft;
        oT = touches.clientY - target.offsetTop;
//阻止touchmove默认事件
        document.addEventListener("touchmove", defaultEvent, false);
    }, false);
    target.addEventListener('touchmove', function(e) {
        var touches = e.touches[0];
        var oLeft = touches.clientX - oL;
        var oTop = touches.clientY - oT;
//拖动约束条件
        if (oLeft < 0) {
            oLeft = 0;
        } else if (oLeft > document.documentElement.clientWidth - target.offsetWidth) {
            oLeft = (document.documentElement.clientWidth - target.offsetWidth);
        } else if (oTop < 0) {
            oTop = 0;
        } else if (oTop > document.documentElement.clientHeight - target.offsetHeight) {
            oTop = (document.documentElement.clientHeight - target.offsetHeight);
        }
        target.style.left = oLeft + "px";
        target.style.top = oTop + "px";

    }, false);
    target.addEventListener('touchend', function() {
        document.removeEventListener("touchmove", defaultEvent, false);
    });
//阻止默认事件
    function defaultEvent(e) {
        e.preventDefault();
    }
    </script>

</html>

 

posted @ 2016-09-01 15:57  frankly-26  阅读(211)  评论(0)    收藏  举报