问题描述
最小工作示例
const div = document.querySelector('div');
div.addEventListener('dragstart',e=>{
console.log('start');
console.log({x: e.clientX,y: e.clientY});
});
div.addEventListener('dragend',e=>{
console.log('end');
console.log({x: e.clientX,y: e.clientY});
});
div{
width: 50px;
height: 50px;
background: red;
}
<div draggable='true'></div>
问题
让拖动顶点前为{startX,startY}
;让拖动顶点后为{endX,endY}
通过向右水平拖动 div
,我想观察以下两件事:
-
dragend
回调在鼠标抬起后立即执行。 -
startX
与endX
不同,但startY
与endY
相同。哪个开始位置应该是mouse down
位置,结束位置应该是mouse up
位置。
然而,对于实际结果:
-
dragend
似乎被延迟了一段奇怪的时间,只有当红色 div 回到其原始位置时才会在鼠标抬起后执行。 -
startX
与endX
不同,startY
与endY
不同,开始位置对应鼠标按下位置是正确的,但结束位置完全是胡说八道。
我想做什么
包含科目卡片的时间表,允许学生拖放,只有某些区域允许拖放。例如,在 12:00~12:45
期间。因此我需要检查 dragend
位置来决定它应该适合哪个网格。
浏览器
Safari 版本 14.0.2 (16610.3.7.1.9)
对于以下任何一项,我将不胜感激:
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)