Javascript 当鼠标已落在元素上并已移动时，如何启用可拖动？

我编写了代码，允许在鼠标在HTML元素上停留一段时间后拖动该元素

问题是，当我使用本机HTML拖放时，并且在超时结束时启用Dragable属性，则鼠标在该元素上已经停留了一段时间，如果鼠标在超时结束之前已经在该元素上停留了一段时间，则HTML将不会触发dragstart事件，甚至不会开始拖动该元素

下面有一个例子

变量t； 函数startDelayedDrag{ 净空时间； document.getElementById'dragtarget'.DragTable=false； 控制台。记录“mousedown” t=设置时间输出功能{ console.log“已启用拖动” document.getElementById'dragtarget'.DragTable=true； }, 1000; } .droptarget{ 浮动：左； 宽度：100px； 高度：35px； 利润率：15px； 填充：10px； 边框：1px实心AAAAA； 用户选择：无； } 拖动我

---

这是一个棘手的问题，可能与您的想法不同，但下面是一个如何解决您的问题的想法：

启动拖动事件 通过使用setDragImage设置图像来隐藏拖动对象 克隆拖动元素节点，隐藏克隆并将其添加到文档中，因为无法更改setDragImage设置的图像 启动超时以更改重影元素的可见性 这在很多方面还可以改进，但我认为你可以了解它是如何工作的。作为参考，请参见以下代码段：

const[$drag]=document.getElementsByClassName'drag' 常量[$pixel]=document.getElementsByClassName'pixel' 设$ghost=null $drag.addEventListenerdragstart，e=>{ //将当前拖动的图元设置为不可见 e、 dataTransfer.setDragImage$pixel，0,0 //创建一个重影元素 $ghost=$drag.cloneNodetrue $ghost.style.position=绝对值 $ghost.style.display=无 document.body.appendChild$ghost 设置超时=>{ $ghost.style.display='block' }, 1000 } $drag.addEventListenerdrag，e=>{ //拖动时保持重影位置以跟随鼠标 $ghost.style.left=`${e.clientX}px` $ghost.style.top=`${e.clientY}px` }，假； $drag.addEventListenerDragen，e=>{ //除鬼 如果$ghost.parentNode$ghost.parentNode.removeChild$ghost }，错 .内容{ 显示器：flex； } .盒子{ 宽度：100px； 高度：35px； 填充：10px； 利润率：10px； 边框：1px实心AAAAA； } .放下{ 用户选择：无； } .拖{ 文本对齐：居中； } .像素{ 宽度：1px； 高度：1px； 背景色：白色； } 拖曳

---

这并不是我想要的，但它可能是最好的解决方案。我希望它不会拖到超时时间，这样它就不会干扰我设置的其他事件。但这可能是最好的解决方案，我只需要一个变量来忽略这些事件，直到超时结束。谢谢您的工作。@OwenM是的，这与您最初的问题不同，因为当前的drag API有一些限制。无论如何，如果这解决了您的问题，请记住将答案标记为已解决。