div在body中可以任意拖动

最新推荐文章于 2024-10-02 12:33:47 发布

哈哈hyc

最新推荐文章于 2024-10-02 12:33:47 发布

阅读量238

点赞数

分类专栏：前端前端——JavaScript 文章标签： javascript html5 jquery vue

本文链接：https://blog.csdn.net/erdfty/article/details/108451736

版权

前端同时被 2 个专栏收录

64 篇文章 4 订阅

订阅专栏

前端——JavaScript

31 篇文章 0 订阅

订阅专栏

HTML代码

<div id="idOuterDiv" class="CsOuterDiv">
 
</div>

CSS代码

body {
    background-color:#232429;
}
.CsOuterDiv {
    width:256px;
    height:146px;
    background-color:white;
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    -moz-transform:translateX(-50%) translateY(-50%);
    -webkit-transform:translateX(-50%) translateY(-50%);
    -ms-transform:translateX(-50%) translateY(-50%);
    border-radius:5px;
    box-shadow:3px 3px  10px blue;
}

JS代码

function dragFunc(id) {
    var Drag = document.getElementById(id);
    Drag.onmousedown = function(event) {
        var ev = event || window.event;
        event.stopPropagation();
        var disX = ev.clientX - Drag.offsetLeft;
        var disY = ev.clientY - Drag.offsetTop;
        document.onmousemove = function(event) {
            var ev = event || window.event;
            Drag.style.left = ev.clientX - disX + "px";
            Drag.style.top = ev.clientY - disY + "px";
            Drag.style.cursor = "move";
        };
    };
    Drag.onmouseup = function() {
        document.onmousemove = null;
        this.style.cursor = "default";
    };
};
dragFunc("idOuterDiv");

大家按照自己的需要导入，可以自定义，有不懂的可以留言