拖放：当我点击元素时，元素不会停留在其原始位置

Question

我正在为我的一个项目编写自己的拖放功能，但我运行遇到了问题。我所有的“可拖动”元素都在带有 display:flex 的容器中。在其中一个元素的 mousedown 事件中，我将 position 设置为 absolute，这样我就可以在拖动时设置该元素的 left 和 top 属性。这是我正在做的事情：

let container = document.querySelector("#big-container")
var dragging = false;
var draggedObject;
let shiftX=0;
let shiftY=0;
document.querySelectorAll(".draggable").forEach((draggable,index) => {
    draggable.style.order = index;
    draggable.draggable =false;
    draggable.ondragstart = ()=>{return false}
    draggable.addEventListener("mousedown",ev =>{
        draggedObject = draggable;
        shiftX = ev.offsetX+5;
        shiftY = ev.offsetY+5;
        draggable.style.position = "absolute";
        draggable.style.left = (ev.clientX - shiftX) + 'px';
        draggable.style.top = (ev.clientY - shiftY) + 'px';
        dragging = true;
        let placeholder = document.createElement("div");
        placeholder.id = "placeholder";
        placeholder.style.order = draggable.style.order;
        container.appendChild(placeholder);
    })

})

document.addEventListener("mousemove", ev =>{
    if(dragging){
        draggedObject.style.left = ev.clientX - shiftX + 'px';
        draggedObject.style.top = ev.clientY - shiftY + 'px';
    }
})

document.addEventListener("mouseup",ev =>{
    if(dragging){
        draggedObject.style.position = 'static'
        let placeholder = document.querySelector("#placeholder");
        container.removeChild(placeholder);
        dragging = false
    }
})

/* the :not(:last-of-type(div)) is there so the console doesn't get affected */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: black;
}
.draggable {
    width: 90px;
    height: 120px;
    margin: 5px;
}


#placeholder {
    width: 90px;
    height: 120px;
    margin: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    border: dashed grey 5px;
}

<body draggable="false" ondragstart="return false;">
<div id = "big-container" style ="display: flex; background-color: rgb(76, 104, 95); width: 500px; height: 500px;">
    <div style="background-color: rgb(204, 125, 111);" class="draggable"></div>
    <div style="background-color: rgb(170, 214, 120);" class="draggable"></div>
    <div style="background-color: rgb(129, 212, 167);" class="draggable"></div>
    <div style="background-color: rgb(162, 137, 196);" class="draggable"></div>
</div>
</body>

我想要实现的是，在 mousedown 上，元素应该保持在原来的位置，之后当我移动鼠标移动元素时也应该保持原样。（锚点应该是我点击元素的地方）我正在做 shiftX = ev.offsetX+5; 因为我需要考虑元素的边距。

问题是当我单击一个元素时（根本没有移动我的鼠标），您可以看到元素的位置有一点偏移。它非常小（可能是 1 或 2px）并且不会在所有地方发生（元素中的某些区域不会引入此位置偏移）

你们知道是什么原因造成的吗？

Answer 1

您可以使用getBoundingClientRect()获取实际位置。

let container = document.querySelector("#big-container");
var dragging = false;
var draggedObject;
let shiftX = 0;
let shiftY = 0;
document.querySelectorAll(".draggable").forEach((draggable, index) => {
  draggable.style.order = index;
  draggable.draggable = false;
  draggable.ondragstart = () => {
    return false;
  };
  draggable.addEventListener("mousedown", (ev) => {
    draggedObject = draggable;
    var x = draggable.getBoundingClientRect().top - 5;
    var y = draggable.getBoundingClientRect().left - 5;
    shiftX = ev.offsetX + 5;
    shiftY = ev.offsetY + 5;
    draggable.style.position = "absolute";
    draggable.style.left = y + "px";
    draggable.style.top = x + "px";
    dragging = true;
    let placeholder = document.createElement("div");
    placeholder.id = "placeholder";
    placeholder.style.order = draggable.style.order;
    container.appendChild(placeholder);
  });
});

document.addEventListener("mousemove", (ev) => {
  if (dragging) {
    draggedObject.style.left = ev.clientX - shiftX + "px";
    draggedObject.style.top = ev.clientY - shiftY + "px";
  }
});

document.addEventListener("mouseup", (ev) => {
  if (dragging) {
    draggedObject.style.position = "static";
    let placeholder = document.querySelector("#placeholder");
    container.removeChild(placeholder);
    dragging = false;
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: black;
}
#big-container {
  width: 500px;
  height: 500px;
}
.draggable {
  width: 90px;
  height: 120px;
  margin: 5px;
}

#placeholder {
  width: 90px;
  height: 120px;
  margin: 5px;
  background-color: rgba(0, 0, 0, 0.3);
  border: dashed grey 5px;
}

<body draggable="false" ondragstart="return false;">
    <div
      id="big-container"
      style="display: flex; background-color: rgb(76, 104, 95);"
    >
      <div
        style="background-color: rgb(204, 125, 111);"
        class="draggable"
      ></div>
      <div
        style="background-color: rgb(170, 214, 120);"
        class="draggable"
      ></div>
      <div
        style="background-color: rgb(129, 212, 167);"
        class="draggable"
      ></div>
      <div
        style="background-color: rgb(162, 137, 196);"
        class="draggable"
      ></div>
    </div>

  </body>

拖放：当我点击元素时，元素不会停留在其原始位置

Drag'n'drop: Element not staying at its original position when I click on it

html

javascript

css

drag-and-drop

element