js：单击+拖动->从div转义光标

问题描述

我想在页面上包含几个可拖动元素（您可以单击一个div，它可以使其父级拖动），只能使用 js 。我从那里得到了一个不错的代码：JavaScript How to Dynamically Move Div by Clicking and Dragging 制作了一个可拖动元素，我对其进行了修改，使其可用于带有类列表的多个div。问题在于，既然我这样做了，光标移到了div之外，我不明白为什么。您能帮我找出原因吗？

这是我的代码：

<style>
    .allWindows{
        width: 42vw;
        height: 22vw;
        position: absolute;
    }
    .upperHelms{
        width: 100%;
        height: 20px;
        background-color: grey;
        cursor: pointer;
        text-align: center;
        color: white;
    }
    .window1{
        top: 20vh;
        left: 4vw;
        background-color: red;
    }
    .window2{
        top: 40vh;
        left: 40vw;
        background-color: blue;
    }
    .window3{
        top: 60vh;
        left: 1vw;
        background-color: black;
    }
</style>
<body>
    <div class="window1 allWindows">
    <div class="upperHelms helm1">red</div>
</div>

<div class="window2 allWindows">
    <div class="upperHelms helm2">blue</div>
</div>

<div class="window3 allWindows">
    <div class="upperHelms helm3">black</div>
</div>
</body>
</html>

<script>
var mousePosition;
var offset = [0,0];
var isDown = false;
var i;
var u;

for (var a=1; a<4; a++) {
    var greyHelms = document.getElementsByClassName("helm"+a);
        for (i = 0; i < greyHelms.length; i++){
            greyHelms[i].addEventListener("mousedown",function(e) {
                for (var b=1; b<4; b++) {
                    // alert(e.target.classList)
                    var helms = document.getElementsByClassName(e.target.classList);
                    
                    for (u = 0; u < helms.length; u++){
                        isDown = true;
                        offset = [
                            helms[u].offsetLeft - e.clientX,helms[u].offsetTop - e.clientY
                        ];
                    }
                }
            },true);
        };

    document.addEventListener('mouseup',function() {
        isDown = false;
    },true);

    document.addEventListener('mousemove',function(event) {
        event.preventDefault();
        if (isDown) {
            for (var b=1; b<4; b++) {
                // alert(event.target.classList)
                var helms = document.getElementsByClassName(event.target.classList);
                
                for (u = 0; u < helms.length; u++){
                    mousePosition = {
                        
                        x : event.clientX,y : event.clientY

                    };
                helms[u].style.left = (mousePosition.x + offset[0]) + 'px';
                helms[u].style.top  = (mousePosition.y + offset[1]) + 'px';
                }
            }
        }
    },true);
}
</script>

提前谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

drag javascript