拖拽小案例

最新推荐文章于 2023-05-11 17:12:00 发布

weixin_34192993

最新推荐文章于 2023-05-11 17:12:00 发布

阅读量68

点赞数

文章标签： python

原文链接：https://my.oschina.net/shuaihong/blog/1585920

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <style>
    #block {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
    }
    </style>
</head>

<body>
    <div id="block"></div>
    <script>
    // 获取节点
    var block = document.getElementById("block");
    drag(block);

    /**
    * 功能：物体拖拽方法的封装
    * 参数：js物体对象 obj
    * author: wangyuhong
    * time: 2017/12/6 
    */
    function drag(obj){
        var oW, oH;
        // 绑定touchstart事件
        block.addEventListener("touchstart", function(e) {
            var touches = e.touches[0];
            oW = touches.clientX - block.offsetLeft;
            oH = touches.clientY - block.offsetTop;
            //阻止页面的滑动默认事件
            document.addEventListener("touchmove", defaultEvent, false);
        }, false)

        block.addEventListener("touchmove", function(e) {
            var touches = e.touches[0];
            var oLeft = touches.clientX - oW;
            var oTop = touches.clientY - oH;
            var clientWidth = document.documentElement.clientWidth;
            var clientHeight = document.documentElement.clientHeight
            // 左右边界判断
            if (oLeft < 0) {
                oLeft = 0;
            } else if (oLeft > clientWidth - block.offsetWidth) {
                oLeft = clientWidth - block.offsetWidth;
            }

            //上下边界判断
            if (oTop < 0) {
                oTop = 0;
            }else if (oTop > clientHeight - block.offsetHeight) {
                oTop = clientHeight - block.offsetHeight;
            }

            block.style.left = oLeft + "px";
            block.style.top = oTop + "px";
        }, false);

        block.addEventListener("touchend", function() {
            document.removeEventListener("touchmove", defaultEvent, false);
        }, false);

        function defaultEvent(e) {
            e.preventDefault();
        }
    }
    </script>
</body>

</html>

转载于:https://my.oschina.net/shuaihong/blog/1585920