纯J拖动案例

Posted 2020-11-02 小李HH

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯J拖动案例相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        .nav{
            height:30px;
            background: #036663;
            border-bottom:1px solid #369;
            line-height: 30px;
            padding-left:30px;
        }
        .nav a {
            color:#fff;
            text-align: center;
            font-size:14px;
            text-decoration: none;

        }
        .d-box{
            width:400px;
            height:300px;
            border:5px solid #eee;
            box-shadow:2px 2px 2px 2px #666;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -155px;
            margin-left:-205px;

        }
        .hd{
            width:100%;
            height:25px;
            background-color: #7c9299;
            border-bottom:1px solid #369;
            line-height: 25px;
            color:white;
            cursor: move;
        }
        #box_close{
            float: right;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="nav">
    <a href="javascript:;" id="register">注册信息</a>
</div>
<div class="d-box" id="d_box">
    <div class="hd" id="drop">注册信息   (可以拖拽)
            <span id="box_close">【关闭】</span>
    </div>
    <div class="bd"></div>
</div>
</body>
</html>
<script>
    var box = document.getElementById("d_box");
    var drop = document.getElementById("drop");
    startDrop(drop,box);  // 鼠标放到  drop    但是移动 是 box
    function startDrop(current,move) {
        current.onmousedown = function(event) {
            var event = event || window.event;
            var x = event.clientX - move.offsetLeft - 205;   // 记录当前盒子的x 位置
            var y = event.clientY - move.offsetTop - 155;  //  // 记录当前盒子的y位置
            document.onmousemove = function(event) {
                var event = event || window.event;
                move.style.left = event.clientX - x + "px";
                move.style.top = event.clientY - y + "px";
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            }

        }
        document.onmouseup = function() {  // 鼠标弹起之后， 鼠标继续移动不应该操作
            document.onmousemove = null;
        }
    }

以上是关于纯J拖动案例的主要内容，如果未能解决你的问题，请参考以下文章

Android从地图片段底部拖动回收器视图

纯js实现DIV拖拽