Почему Draggable div не следует за курсором мыши? - PullRequest
Новая
       52

Почему Draggable div не следует за курсором мыши?

0 голосов
/ 08 марта 2020

Мне нужен перетаскиваемый div, следующий за курсором, однако я пробовал несколько тестов, и это не работает .. где я ошибаюсь в коде? Мне нужен ход div после mousedown ...., чтобы следовать за мышью, курсором ... 

#dragdiv {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  margin: 50px;
}
<div id="container">
    <div id="dragdiv"></div>
</div>

   window.addEventListener('mouseup', mouseUpElement, false);
   document.getElementById("dragdiv").addEventListener('mousedown', mouseDownElement, false);

   function mouseDownElement() {
   window.addEventListener("mousemove", myFunctionDragElement, true);
   document.getElementById("dragdiv").style.cursor = "pointer";
   }

   function mouseUpElement() {
   window.removeEventListener("mousemove", myFunctionDragElement, true);
   document.getElementById("dragdiv").style.cursor = "auto";
   }

   function myFunctionDragElement(e) {

   var x = e.clientX;
   var y = e.clientY;

   var oTop = document.getElementById("dragdiv").offsetTop;
   var oLeft = document.getElementById("dragdiv").offsetLeft;

   document.getElementById("dragdiv").style.position = "absolute";
   document.getElementById("dragdiv").style.left = x - oTop + "px" ;
   document.getElementById("dragdiv").style.top = y - oLeft + "px";

   }

1 Ответ

0 голосов
/ 08 марта 2020

Вы можете установить transform для div и удалить использование смещений: 

var dragDiv = document.getElementById("dragdiv")
window.addEventListener('mouseup', mouseUpElement, false);
dragDiv.addEventListener('mousedown', mouseDownElement, false);

function mouseDownElement() {
  window.addEventListener("mousemove", myFunctionDragElement, true);
  dragDiv.style.cursor = "pointer";
}

function mouseUpElement() {
  window.removeEventListener("mousemove", myFunctionDragElement, true);
  dragDiv.style.cursor = "auto";
}

function myFunctionDragElement(e) {
  var x = e.clientX;
  var y = e.clientY;
  dragDiv.style.left = x  + "px";
  dragDiv.style.top = y  + "px";
}
#dragdiv {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50px;
  left: 50px;
  transform: translate(-50%, -50%);
}
<div id="dragdiv"></div>
...