javascript - 对拖动的图像及其元素使用相同的位置

Question

拖动图像时，我希望拖动的图像和元素本身具有相同的位置以使其看起来流畅。

var troll = document.getElementById('troll');
var x, y = 0;

troll.addEventListener('drag', (e) => {
  e.preventDefault();
  var left = e.clientX - 40 + 'px';
  var top = e.clientY - 40 + 'px';
  if (x < e.clientX) {  	
  	e.target.style.left = left;
  }
  else {
  	e.target.style.left = left--;
  }
  if (y < e.clientY) {
  	e.target.style.top = top;
  }
  else {
  	e.target.style.top = top--;
  }
  x = e.clientX - e.target.width;
  y = e.clientY - e.target.height;
}, 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 left = e.clientX - 40 + 'px';
var top = e.clientY - 40 + 'px';

这总比没有好，但它看起来并不完美，因为40它只是一个静态数字。我也试过了e.clientX - e.target.width + 'px'，e.clientY - e.target.height + 'px'但它不起作用。

如何使用动态号码？或者如果有更好的解决方案，请告诉我。

标签： javascript