如何拖动和变换一个盒子？

Question

我正在创建一个框，我可以在其中沿页面的 X 轴拖动它。我想把它拖放到任何地方。但是，代码无法运行，因为e.clientX在新的点击后值会自行重置。因此我可以拖动它，但是当我再次拖动它时，它会自动到中间。const box = document.querySelector('.box');box.addEventListener('dragstart', dragStart);box.addEventListener("drag", handleDrag);box.addEventListener("dragend", dragEnd);let startX = 0;function dragStart(e) {  startX = e.clientX;  console.log(startX);}function handleDrag(e) {  const currentX = e.clientX;  box.style.transform = 'translateX(' + (currentX - startX) + 'px)';}function dragEnd(e) {  box.style.transform = 'translateX(' + (e.clientX - startX) + 'px)';}.container {  width: 100vw;  height: 100vh;  display: flex;  justify-content: center;  align-items: center;}.box {  width: 250px;  height: 250px;  background-color: tomato;}<div class="container">  <div class="box" draggable="true"></div></div>

Answer 1

好的，我认为解决方案就在那里：

我所做的是向盒子添加一个属性（如果你只有一个盒子，你可以只声明一个全局变量）来存储盒子的当前位置

const box = document.querySelector('.box');

box.addEventListener('dragstart', dragStart);

box.addEventListener("drag", handleDrag);

box.addEventListener("dragend", dragEnd);

box.currentTransform = 0; // adding this 

let startX = 0;

function dragStart(e) {

  startX = e.clientX;

  console.log(startX);

}

function handleDrag(e) {

  const currentX = e.clientX;

  box.style.transform = 'translateX(' + 

    (box.currentTransform + currentX - startX) + // changed that

    'px)'; 

}

function dragEnd(e) {

  box.currentTransform += e.clientX - startX // added that

  box.style.transform = 'translateX(' + (box.currentTransform) + 'px)'; // changed this

}

.container {

  width: 100vw;

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

}

.box {

  width: 250px;

  height: 250px;

  background-color: tomato;

}

<div class="container">

  <div class="box" draggable="true"></div>

</div>

现在它似乎工作得很好