Javascript 拖放API问题或？

我遇到了HTML5拖放API的问题

长话短说，除了

dragstart

、

dragover

和

drop

，还有三个事件对我的目标至关重要。这三个事件是

mousedown

、

mouseup

和

mouseleave

昂穆斯敦 当用户在给定元素上触发

mousedown

事件时，以下函数将属性和侦听器应用于自身和目标元素

function doThis() {
  d.setAttribute('draggable', true)
  d.addEventListener('dragstart', dragStart)
  t.style.background = 'black'
  t.addEventListener('dragover', dragOver)
  t.addEventListener('drop', drop)
}

onmouseup&mouseleave 当用户触发

mouseup

或

mouseleave

事件时，这些属性和侦听器将被删除

function thenThis(){
  d.setAttribute('draggable', false)
  d.removeEventListener('dragstart', dragStart)
  t.style.background = 'none'
  t.removeEventListener('dragover', dragOver)
  t.removeEventListener('drop', drop)
}

我不得不添加

mouseleave

侦听器，因为

mouseup

事件必须发生在绑定到的元素上才能触发。无需应用

mouseleave

事件，用户可以触发

mousedown

事件，同时完全避免

mouseup

事件（由于浏览器本机检测到

dblclick

事件）双击图元，然后将光标滑离图元，同时在超出图元周长之前不松开鼠标按钮

这个问题。。。 如果用户单击的可拖动元素太靠近其边缘，则尽管触发了

mousedown

事件，该元素仍将不可拖动

为什么会发生这种情况？甚至会触发

mousedown

，但元素仍然不可拖动

有人知道我如何首先修复或防止它发生吗？

var d=document.getElementById（'draggable'））
var t=document.getElementById（'target'）
d、 addEventListener（'mousedown'，doThis）
d、 addEventListener（'mouseup'，然后是this）
d、 addEventListener（'mouseleave'，然后是This）
d、 addEventListener（'mouseleave'，alertLeave）
函数doThis（）{
d、 setAttribute（'draggable'，true）
d、 addEventListener（'dragstart'，dragstart）
t、 style.background='black'
t、 addEventListener（'dragover'，dragover）
t、 addEventListener（'drop'，drop）
}
函数this（）{
d、 setAttribute（'draggable'，false）
d、 removeEventListener（'dragstart'，dragstart）
t、 style.background='none'
t、 removeEventListener（'dragover'，dragover）
t、 removeEventListener（'drop'，drop）
}
函数dragStart（e）{
e、 dataTransfer.setData（'text/plain'，e.target.id）；
e、 dataTransfer.effectAllowed='move'；
}
函数dragOver（e）{
e、 预防默认值（）；
}
功能下降（e）{
var data=e.dataTransfer.getData（'text/plain'）；
e、 预防默认值（）；
e、 target.parentElement.appendChild（document.getElementById（数据））；
}
函数alertLeave（）{
//警报（'mouseleave'）
}

正文{
显示器：flex；
证明内容：周围的空间；
}
div{
宽度：50px；
高度：50px；
}
#拖拉的{
背景：紫色；
}
#目标{
边框：纯色3px黑色；
}

---

当您试图抓住靠近其右边缘的左元素时，问题是在您将鼠标向右移动时，

拖动启动之前，
鼠标移动
会立即触发。您可以在此代码段中看到事件：


var d=document.getElementById（'draggable'））
var t=document.getElementById（'target'）
d、 addEventListener（'mousedown'，doThis）
d、 addEventListener（'mouseleave'，然后是This）
函数doThis（）{
console.log（'mousedown'）；
d、 setAttribute（'draggable'，true）；
d、 addEventListener（“dragstart”，dragstart）；
t、 style.background='black'；
t、 添加的列表器（“dragover”，dragover）；
t、 addEventListener（“下降”，下降）；
}
函数this（）{
console.log（'mouseleave'）；
d、 setAttribute（'draggable'，false）；
d、 removeEventListener（“dragstart”，dragstart）；
t、 style.background='none'；
t、 removeEventListener（“dragover”，dragover）；
t、 removeEventListener（“删除”，删除）；
}
函数dragStart（e）{
console.log（'dragstart'）；
e、 dataTransfer.setData（'text/plain'，e.target.id）；
e、 dataTransfer.effectAllowed='move'；
}
函数dragOver（e）{
e、 预防默认值（）；
}
功能下降（e）{
var data=e.dataTransfer.getData（'text/plain'）；
e、 预防默认值（）；
e、 target.parentElement.appendChild（document.getElementById（数据））；
}
正文{
显示器：flex；
证明内容：周围的空间；
}
.广场{
宽度：50px；
高度：50px；
}
#拖拉的{
背景：紫色；
}
#目标{
边框：纯色3px黑色；
}

您的解决方案的问题是，它仍然可以通过
dblclick
事件进行故障排除。尝试快速连续单击（或双击）紫色方块两次，不要在第二次单击后松开鼠标按钮，而是继续按住鼠标按钮，然后在松开鼠标之前将光标滑离紫色方块。在再次拖动元素之前，目标将保持黑色。我在只使用
mousedown
和
mouseup
时遇到了同样的问题，这就是为什么我也开始使用
mouseleave
我修改了第一个解决方案，使目标仅在开始拖动时变为黑色。我不知道这是否对你有用。我相信会有用的。我在原始帖子（指向另一篇文章）中添加了鼠标捕获的链接。通常，当鼠标事件发生时（mousemove、mousedown等），鼠标下的元素会接收该事件。但是，当一个元素“捕获”了鼠标时，所有鼠标事件都会发送到该元素，即使鼠标不在该元素的上方也是如此。参见MDN的HTML，它包含了大量的示例和详细信息。你可以复制粘贴到你的项目中。@RonRoyston是的，我已经知道了所有的事件，虽然我相信我仍然可以学到一些东西，但是一天中的时间太少了，而且太懒了哈哈