使用 JavaScript 拖动元素（平移位置 CSS3）

Question

我正在做一个小任务，我必须在文档中任意拖动 (translate) 一个元素。我已经完成了基本工作，但对鼠标的当前位置感到困惑。因为当我开始拖动元素时，鼠标位置不在 mousedown 出现的地方。

简单地说，我希望鼠标的位置停留在我点击框的位置。

这是 JSFiddle link.

Answer 1

好吧，您需要计算元素的宽度和高度，以便将光标保持在其中心，请注意，现在它可以使用任何宽度和高度值，这里我添加了一个动画，只是调整宽度和高度的大小看到我们总是得到元素的中心

let target = document.querySelector(".drag");

function onDrag(e) {
  // we could make them global variables instead
  const {width, height} = window.getComputedStyle(target);
  target.style.transform = `translate(${e.clientX - +width.replace("px", "") / 2}px, ${e.clientY - +height.replace("px", "") / 2}px)`;
}

function onLetGo() {
    document.removeEventListener('mousemove', onDrag);
    document.removeEventListener('mouseup', onLetGo);
}

function onGrab() {
    document.addEventListener('mousemove', onDrag);
    document.addEventListener('mouseup', onLetGo);
}

target.addEventListener('mousedown', onGrab);

* {
  box-sizing: border-box;
}
.drag{
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: blue;
  cursor: pointer;
  position: fixed;
  animation-name: resize;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes resize {
    0% {width: 100px}
    25% {height: 150px}
    50% {width: 150px}
    100% {height: 100px}
}

<div class="drag"></div>

编辑以回答 OP 的评论

Thanks for the answer, it works fine. Is there any way, we can drag the div from any place where we click the div?

所以现在你想从点击点而不是它的中心拖动元素，你可以从 event.clientX 中减去 event.offsetX 以获得正确的光标位置，y 轴也是如此，并确保容器没有边距或填充，在这个例子中，我已经从 HTML 和 BODY 元素

中删除了边距和填充

let target = document.querySelector(".drag"), x = 0, y = 0;

function onDrag(e) {
  // we use the coords of the mousedown event
  target.style.transform = `translate(${e.clientX - x}px, ${e.clientY - y}px)`;
}

function onLetGo() {
    document.removeEventListener('mousemove', onDrag);
    document.removeEventListener('mouseup', onLetGo);
}

function onGrab(e) {
    // we store the point of click(coords)
    x = e.offsetX, y = e.offsetY;
    document.addEventListener('mousemove', onDrag);
    document.addEventListener('mouseup', onLetGo);
}

target.addEventListener('mousedown', onGrab);

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
.drag{
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: blue;
  cursor: pointer;
  position: fixed;
}

<div class="drag"></div>

因为过渡会受到边距、填充和其他流量控制规则的影响，所以您可以避免使用它，只需使用 left 和 top 规则来正确定位您的元素，就像这样

let target = document.querySelector(".drag"), x = 0, y = 0;

function onDrag(e) {
  // use the `left` and `top` rules to properly position your element, so 
  // you no more care about other flow affecting rules
  target.style.left = `${e.clientX - x}px`;
  target.style.top = `${e.clientY - y}px`;
}

function onLetGo() {
    document.removeEventListener('mousemove', onDrag);
    document.removeEventListener('mouseup', onLetGo);
}

function onGrab(e) {
    x = e.offsetX, y = e.offsetY;
    document.addEventListener('mousemove', onDrag);
    document.addEventListener('mouseup', onLetGo);
}

target.addEventListener('mousedown', onGrab);

.drag {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: blue;
  cursor: pointer;
  position: fixed;
}

<div class="drag"></div>

使用 JavaScript 拖动元素（平移位置 CSS3）

Drag an element using JavaScript (Translating the position CSS3)

javascript

dom-events

编辑以回答 OP 的评论