我有一个要用鼠标移动的元素。



var troll = document.getElementById('troll');

troll.addEventListener('dragover', (e) => {
	e.preventDefault();
	e.target.style.left = e.clientX + 'px';
  e.target.style.top = e.clientY + 'px';
}, false);

img {
  width: 100px;
  cursor: pointer;
  position: absolute;
}

<div id="troll">
  <img src="http://images.mmorpg.com/features/7909/images/Troll.png" alt="Troll">
</div>





从左到右,从上到下都可以。这并不完美,因为第一步的动作占用了整个空间,而且看起来并不流畅。但是主要的问题是我不能从右到左或从下到上移动。

任何帮助,将不胜感激。

最佳答案

您想使用拖动而不是拖动,以及一些逻辑来知道您要向上或向下或向左或向上的位置。



var troll = document.getElementById('troll');

var X,Y = 0;

troll.addEventListener('drag', (e) => {
  e.preventDefault();

  if (e.clientX > X)
  {
    e.target.style.left = X + 'px';
  }
  else if (e.clientX < X)
  {
    e.target.style.left = X-- + 'px';
  }


  if (e.clientY > Y)
  {
    e.target.style.top = Y + 'px';
  }
  else if (e.clientY < Y)
  {
    e.target.style.top = Y-- + 'px';
  }



  X = e.clientX;
  Y = e.clientY;


}, false);

img {
  width: 100px;
  cursor: pointer;
  position: absolute;
}

<div id="troll">
  <img src="http://images.mmorpg.com/features/7909/images/Troll.png" alt="Troll">
</div>

关于javascript - 拖曳物:无法移至左上方,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50204766/

10-11 12:57