web拖拽 Web组件流畅拖动效果

最新推荐文章于 2024-05-17 04:51:24 发布

chengzi5521

最新推荐文章于 2024-05-17 04:51:24 发布

阅读量1.3k

点赞数

文章标签：前端 ViewUI

原文链接：https://my.oschina.net/u/3010603/blog/1632460

版权

<!DOCTYPE html>
<html>

<head>
    <title>move</title>
</head>
<style type="text/css">
    .body_css {
    width: 100%;
    height: 100%;
    position: absolute;
}

.div_css {
    width: 100px;
    height: 100px;
    background-color: #000;
    position: absolute;
    left: 0px;
    top: 0px;
    color: #fff;
    user-select: none;
}
</style>
<script type="text/javascript">
    window.onload = function() {
        var d = document.getElementById('div');
        var b = document.getElementById('body');
        d.addEventListener("mousedown", function(ed) {
            var flag = true;
            var dl = d.offsetLeft;
            var dt = d.offsetTop;
            b.addEventListener("mousemove", function(em) {
                if (flag) {
                    d.style.left = dl + em.clientX - ed.clientX + "px";
                    d.style.top = dt + em.clientY - ed.clientY + "px";
                }
            });
            b.addEventListener("mouseup", function() {
                flag = false;
            });
        });
    }
</script>

<body id="body" class="body_css">
<div id="div" class="div_css">鼠标点击我，进行拖拽</div>
<a href="http://121.12.170.102:8280/wy/web/tuozhuai.html">效果访问地址</a>
</body>

</html>