基于jQuery（原生也可以）实现HTML元素拖动（自制窗口拖动，以及多个窗口拖动并且互不干扰）源代码

最新推荐文章于 2023-04-07 17:21:08 发布

zpcsgo

最新推荐文章于 2023-04-07 17:21:08 发布

阅读量2.9k

点赞数 2

分类专栏： jquery

本文链接：https://blog.csdn.net/zpcsgo/article/details/53691557

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .drag {
            position: absolute;
            top: 200px;
            left: 200px;
        }

        .Pop-Box {
            width: 500px;
            border-top: 0;
            background: #F7F5F5;
        }

        .box-header {
            width: 500px;
            background: #428BCA;
            color: #fff;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            padding-left: 5px;
            box-sizing: border-box;
        }

        .box-header span {
            float: right;
            color: #FFF;
            width: 30px;
            height: 30px;
            background: #428BCA;
            text-align: center;
            line-height: 30px;
        }

        .box-header span:hover {

            background: #D9534F;
        }

        .box-main {
            border: 2px solid #428BCA;
            padding-top: 5px;
        }

        .box-main span {
            display: inline-block;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: right;
            margin-bottom: 10px;
        }

        .box-main input {
            width: 140px;
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
            font-size: 18px;
        }

        .box-foot-btn {
            text-align: center;
            margin: 10px 0;

        }

        .box-foot-btn button {
            margin-left: 10px;

        }

        .hide {
            display: none;
        }

        .show {
            display: block;
        }
    </style>
</head>
<body>


<div class="Pop-Box drag a">
    <div class="box-header">修改属性
        <span class="fa fa-close close-box">X</span>
    </div>
    <div class="box-main">
        <div >
            <p class="Proprows">
                <span>属性名</span><input type="text" name="newProperty"/>
                <span>属性值</span><input type="text" name="newPropValue"/>
            </p>
        </div>
        <div class="box-foot-btn">
            <button >增加</button>
            <button >确定</button>
        </div>
    </div>
</div>
<div class="Pop-Box drag b">
    <div class="box-header">修改属性
        <span class="fa fa-close close-box">X</span>
    </div>
    <div class="box-main">
        <div >
            <p class="Proprows">
                <span>属性名</span><input type="text" name="newProperty"/>
                <span>属性值</span><input type="text" name="newPropValue"/>
            </p>
        </div>
        <div class="box-foot-btn">
            <button >增加</button>
            <button >确定</button>
        </div>
    </div>
</div>


<script src="jquery.min.js"></script>
<script>


    function move(className) {
        var isMove = false;
        var X, Y;
        $("."+className).click(function () {
        }).mousedown(function (e) {
            isMove = true;
            X = e.pageX - parseInt($("."+className).css("left"));
            Y = e.pageY - parseInt($("."+className).css("top"));
        });
        $(document).mousemove(function (e) {
            if (isMove) {
                var left = e.pageX - X;
                var top = e.pageY - Y;
                $("."+className).css({left: left, top: top});
            }
        }).mouseup(function () {
            isMove = false;
        });}
        move("a");
        move("b");

</script>
</body>
</html>