div内的JavaScript可拖动元素答案

【问题标题】：div内的JavaScript可拖动元素
【发布时间】：2022-01-23 05:20:11
【问题描述】：

我尝试在 div 中创建可拖动元素，直到我遇到一个小问题，即我无法找到一种方法来单独拖动每个元素而不影响其他元素，我的代码只处理一个带有其 id 的元素，这是我的尝试

HTML

<div class="wrapper">
  <img id="imgPrime" src="" />
</div>

const wrapper = document.querySelector(".wrapper"),
  header = wrapper.querySelector("#imgPrime");
function onDrag({movementX, movementY}){
  let getStyle = window.getComputedStyle(wrapper);
  let leftVal = parseInt(getStyle.left);
  let topVal = parseInt(getStyle.top);
  wrapper.style.left = `${leftVal + movementX}px`;
  wrapper.style.top = `${topVal + movementY}px`;
}
header.addEventListener("mousedown", ()=>{
  header.classList.add("active");
  header.addEventListener("mousemove", onDrag);
});
document.addEventListener("mouseup", ()=>{
  header.classList.remove("active");
  header.removeEventListener("mousemove", onDrag);
});

Css / 如果有帮助

.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 350px;
  width: 300px;
  transform: translate(-50%, -50%);
  user-select: none;
}
.wrapper header.active{
  cursor: move;
  user-select: none;
}



#imgPrime{ display: none; 
   user-drag: none;  
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
    max-width: 350px;
    width: 300px;
}

【问题讨论】：

标签： javascript html jquery drag-and-drop draggable

【解决方案1】：

如果您单击图标，则图标将随光标移动（拖动），当您不单击更多图像（鼠标上移）时，img 将保持在原位

const wrapper = document.querySelector(".wrapper");

const header = wrapper.querySelector("#imgPrime");

wrapper.addEventListener("mousedown", function() {
    document.onmousemove = function(e) {
        var x = e.clientX;
        var y = e.clientY;
        wrapper.position = "relative";
        wrapper.style.left = x + "px";
        wrapper.style.top = y + "px";
    };
});

document.addEventListener("mouseup", function() {
    document.onmousemove = null;
});

.wrapper {
    position: absolute;
    max-width: 350px;
    width: 300px;
    user-select: none;
}

.wrapper header.active {
    cursor: move;
    user-select: none;
}

#imgPrime {
    max-width: 50px;
    width: 50px;
}

<!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>
    <link rel="stylesheet" href="style.css">
    <script src="./script.js" defer></script>
</head>

<body>
    <div class="wrapper">
        <img id="imgPrime" src="https://img.itch.zone/aW1nLzcyNzgxNy5wbmc=/original/8AJNx%2B.png" />
    </div>
</body>

</html>

【讨论】：