Javascript鼠标事件侦听器-元素跳开并且不能正确跟随鼠标

编程问答 2022-04-24

问题描述

晚上好，

我有一个问题，我已经解决了 2 天了，但一直无法解决。我会马上处理的。

我在一个容器元素中有几行相同类的元素。目标是在任何行上单击并按住 mousedown，然后用鼠标在屏幕上移动它们。问题是，在第一行之后，当尝试移动所述元素时，元素开始从鼠标中大量掉落。

这不仅是容器元素内同一类元素的问题，而且每当我尝试鼠标按下并移动不是文档中第一个元素的任何元素时，我也会发现这个问题。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>

<style>

#container{
    display:inline-block;
    border: 2px black solid;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.rows{
    border: 1px red solid;
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
}
    

</style>

<body>
    <div id="container">
        <div class="rows"></div>
        <div class="rows"></div>
        <div class="rows"></div>
        <div class="rows"></div>
        <div class="rows"></div>
        <div class="rows"></div>
        <div class="rows"></div>
        <div class="rows"></div>
        <div class="rows"></div>
        <div class="rows"></div>  
    </div>
</body>

<script>
    
let rows = document.querySelectorAll('.rows');
let container = document.getElementById('container');

let x = 0;
let y = 0;

for(let i = 0; i < rows.length; i++){

    rows[i].addEventListener('mousedown',grabElement);
    rows[i].addEventListener('mouseup',stopMoving);

    function grabElement(){
    rows[i].addEventListener('mousemove',mouseMove);
    }

    function mouseMove(e){
        x = e.clientX;
        y = e.clientY;
        rows[i].style.transform = `translate(${x-25}px,${y-25}px)`;
    }

    function stopMoving(){
    rows[i].removeEventListener('mousemove',mouseMove);
    }
}
 
</script>

</html>

解决方法

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

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

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

elementelementjavascriptmousedownmousemovemouseup