javascript - Dragover:无法向左和顶部移动
问题描述
我有一个我想用鼠标移动的元素。
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>
推荐阅读
- reactjs - react-hook-form 触发后如何删除 onSubmit 数据负载?
- python - “NoneType”对象没有“发送”属性
- javascript - 如何在 JavaScript 中跟踪鼠标移动
- javascript - 有没有办法在 javascript 中使用 keras.pad_sequences?
- android - 其他一些函数中的 mMap.clear 正在从公共 void onMapLongClick(LatLng latLng) 中删除标记?
- reactjs - 在反应中重用顺风组件的简单方法
- machine-learning - X 上具有较大值的线性回归给出了奇怪的结果
- numpy - How to Plot in 3D Principal Component Analysis Visualizations, using the fast PCA script from this answer
- javascript - Three.js OBJ 和 MTL Loaders 不循环调用
- flutter - 为什么两个 UniqueKeys 仍然会触发“多个小部件使用相同的 GlobalKey”断言?