为啥HTML5拖放dragImage隐藏时不显示？

Posted 2023-05-08

【中文标题】为啥HTML5拖放dragImage隐藏时不显示？

【英文标题】：Why HTML5 drag and drop dragImage is not displayed when it's hidden?为什么HTML5拖放dragImage隐藏时不显示？

【发布时间】：2012-05-12 18:37:46

【问题描述】：

我在将 html5 拖放中的 'dragImage' 设置为 div 元素时遇到了问题。 问题是当 setDragImage(helper, x, y) 函数的第一个参数没有出现在 dom 中或被隐藏时，当 'dragstart' 事件被触发时它是不可见的。 看看我的小提琴：http://jsfiddle.net/AemN5/10/

在小提琴中，我正在渲染助手（它被着色为黄色），而不是 尝试拖动绿色可拖动框，当鼠标附加助手时 拖动开始。但是，请尝试单击帮助程序上方的按钮 隐藏助手。比再次尝试拖动绿色可拖动框 - 没有帮助 附在我的鼠标上。

任何想法为什么会发生以及更重要的是如何解决问题？因为我的主要目标是拥有不可见的助手，并且只有当用户开始拖动时才使其可见，附加到光标上。

【参考方案1】：

这是一种可能的解决方案http://jsfiddle.net/AemN5/12/

【讨论】：

看起来不错，尤其是当您将 overflow: hidden 添加到 body 元素时！

【参考方案2】：

尝试这样做.. chrome 要求至少在拖动开始之前显示图像。

$("[draggable]").on("dragstart", function(e) 
    $("#img1").show();

    e.originalEvent.dataTransfer.setDragImage(helper, 50, 50);

    setTimeout(function()
        $("#img1").hide();
    ,0);
);

【讨论】：

dragstart 事件在 Magento 2 中不起作用。有什么想法吗？