拖拽案例

最新推荐文章于 2020-08-07 18:38:49 发布

python基础教程

最新推荐文章于 2020-08-07 18:38:49 发布

阅读量562

点赞数

CC 4.0 BY-SA版权

分类专栏： 01前端基础教程html_css_js

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/52823501

01前端基础教程html_css_js 专栏收录该内容

78 篇文章

订阅专栏

该博客介绍了如何实现一个简单的拖拽功能，通过鼠标将box元素移动到drop区域，展示了相关交互效果和技术实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标放到drop，移动的是box

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 100%;
            height: 30px;
            background-color: #036663;
            border-bottom: 1px solid #369;
            line-height: 30px;
            padding-left: 30px;
        }
        .nav a {
            color: #FFFFFF;
            text-align: center;
            font-size: 14px;
            text-decoration: none;
        }
        .d-box{
            width: 400px;
            height: 300px;
            border: 5px solid #eeeeee;
            box-shadow :2px 2px 2px 2px #666;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -155px;
            margin-left: -205px;
            display: none;
        }
        .hd{
            width: 100%;
            height: 25px;
            background-color: #7c9299;
            border-bottom: 1px solid #369;
            line-height: 25px;
            color: #FFFFFF;
            cursor: move;
        }
        #box_close{
            float: right;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function () {
            function $(id){return document.getElementById(id)}
            function show(ele){
                ele.style.display = "block";
            }
            function hide(ele){
                ele.style.display = "none";
            }
            var box = $("d_box");
            var drop = $("drop");
            $("register").onclick = function () {
                show(box);
            }
            $("box_close").onclick = function () {
                hide(box);
            }
            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;
                }
            }
        }
    </script>
</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>