一个项目中用到的拖动例子 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style>
            * {
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="refresh" style="height:100%;position: relative;background:#ccc;">
            <div id="managerAuthClick" style="width:200px;height:200px;position: fixed;bottom: 30px;right: 0;background: #ff0000;"></div>
        </div>
    </body>
</html>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js_height.js" type="text/javascript"></script>
<script>
var _index = {};
window.onload = function() {
    _index.iconMove("refresh","managerAuthClick");
}
_index.iconMove = function(father,childId) {
    var posi = {
        clickX: 0, //点击left
        clickY: 0, //点击top
        touchX: 0, //移动left
        touchY: 0, //移动top
        nowX: 0, //默认left
        nowY: 0, //默认top
        moveToX: 0, //准备移动到位置
        moveToY: 0, //准备移动到位置
        open: true
    }
    var managerAuthClick = document.getElementById("managerAuthClick");
    posi.nowX = $("#"+childId).offset().left;
    posi.nowY = $("#"+childId).offset().top;
    var bodyHeight = $("body").innerHeight();
    var bodyWidth = $("body").innerWidth();
    var iconHeight = $("#"+childId).height();
    var iconWidth = $("#"+childId).width();
    var refreshTop = $("#"+father).offset().top;
    var refreshBottom = $("#"+father).height();
    $("#"+childId)[0].addEventListener("touchstart", function(e) {
        $("#"+father).css("overflow", "hidden")
        posi.open = true;
        var touch = e.touches[0];
        posi.clickX = parseInt(touch.pageX);
        posi.clickY = parseInt(touch.pageY);
        posi.nowX = managerAuthClick.offsetLeft;
        posi.nowY = managerAuthClick.offsetTop;
        posi.moveToX = posi.nowX;
        posi.moveToY = posi.nowY;
        e.stopPropagation();
    });
    $("#"+childId)[0].addEventListener("touchmove", function(e) {
        posi.open = false;
        var touch = e.touches[0];
        posi.touchX = parseInt(touch.pageX); //移动X
        posi.touchY = parseInt(touch.pageY); //移动Y
        posi.moveToX = posi.touchX - posi.clickX + posi.nowX;
        posi.moveToY = posi.touchY - posi.clickY + posi.nowY;
        /*固定在圈内*/
        posi.moveToX > bodyWidth - iconWidth ? posi.moveToX = bodyWidth - iconWidth : posi.moveToX = posi.moveToX;
        posi.moveToX < 0 ? posi.moveToX = 0 : posi.moveToX = posi.moveToX;
        posi.moveToY > refreshBottom - iconHeight / 2 ? posi.moveToY = refreshBottom - iconHeight / 2 : posi.moveToY = posi.moveToY;
        posi.moveToY < refreshTop ? posi.moveToY = refreshTop : posi.moveToY = posi.moveToY;
        move();
        e.stopPropagation();
    });
    $("#"+childId)[0].addEventListener("touchend", function(e) {
        $("#"+father).css("overflow", "auto")
        posi.moveToX > bodyWidth / 2 - iconWidth / 2 ? posi.moveToX = bodyWidth - iconWidth : posi.moveToX = 0;
        moveEnd();
    });

    function move() {
        $("#"+childId).css({
            left: posi.moveToX,
            top: posi.moveToY,
            'transition': 'none'
        })
    }

    function moveEnd() {
        $("#"+childId).css({
            left: posi.moveToX,
            top: posi.moveToY,
            'transition': '0.2s'
        })
    }
}
</script>

效果：中间方块可以拖动，然后如果方块靠右边，向右边靠拢，如果方块靠左边，向左边靠拢

posted @ 2019-05-10 17:39  归尘2016  阅读(189)  评论(0)  编辑  收藏  举报