我有一个元素,我想用鼠标移动它。
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>
从左到右、从上到下都可以正常工作。并不完美,因为第一个 Action 就占据了整个空间,而且看起来并不顺利。但主要问题是我无法从右到左或从下到上移动。
如有任何帮助,我们将不胜感激。
最佳答案
您想要使用拖动而不是拖动,并使用一些逻辑来知道您要向上、向下、向左或向上移动。
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 - 拖拽 : Can't move to left and top,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50204766/