当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 让div在body中任意拖动

让div在body中任意拖动

2019年06月01日  | 移动技术网IT编程  | 我要评论

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");

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网