为什么这种CSS风格会干扰HTML5的拖放？ （位置：绝对;左：-10000px）

Question

Dojo Dijit Buttons使用CSS隐藏屏幕外的“真实”按钮：

.dijitOffScreen { 
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}    

• 为什么这会导致HTML5拖放在Chrome和FireFox中无法正常运行？
• 隐藏输入元素并保持相同的Dojo Dijit Button行为的替代方法是什么？（将display:none添加到屏幕外输入元素似乎可行，但是这会在功能上改变输入的行为以及小部件？）

---

原始问题：

有时默认的'ghost'HTML5拖动图像尺寸较小或根本不渲染。它因浏览器而异，似乎与Dojo Dijits有相互作用。

将Dijit按钮添加到可拖动的Dijit ContentPane后，是什么原因导致FireFox中的拖动图标很小而Chrome中根本没有呈现？

简单jsFiddle repro：

var cp1 = new ContentPane({
    style: "width: 400px; height: 124px; background:red",
    content: "cp1: 'ghost 'drag icon is tiny or not visible :(<br />",
});

// Make draggable
domProp.set(cp1.domNode, 'draggable', 'true');
cp1.on('dragstart', onDragStartHandler); // otherwise FF doesn't show drag icon

// PROBLEM -> adding button messes up drag icon
button = new Button({label: 'Dijit Button'});
button.placeAt(cp1.containerNode);

更新

• 除了错误地渲染拖动图标外，其他HTML5拖放事件也无法正常运行。在Chrome上，添加dragover和/或end事件后，整个文档就会消失。在FireFox上，拖动事件的处理速度明显变慢。
• 添加通用HTML按钮输入而不是Dijit按钮不会导致任何这些副作用：绝对是Dojo Dijit以某种方式干扰......

更新2：

• 根本原因：Dijit Button通过dijitOffScreen类隐藏HTML按钮输入元素。从元素中删除left: 10000px !important和top: 10000px !important样式会以显示空白按钮为代表进行拖放操作。 credit：Kenneth G. Franqueiro

Answer 1

根据the spec，您可以使用“setDragImage”指定要在拖动时使用的图像元素，如下所示：

      // First, create draggable ContentPane with weird drag icon
      var cp1 = new ContentPane({
        style: "width: 400px; height: 124px; background:red",
        content: "cp1: 'ghost 'drag icon is full-sized and visible :)<br />",
      });
      var img = document.getElementById("drag-image");
      onDragStartHandler1 = function (ev) {
        console.log(ev);
        console.log('DragStart:', ev.target.id);
        ev.dataTransfer.setData("Text", ev.target.id);
        // Define "ghost" image here, with proper offset
        ev.dataTransfer.setDragImage(img, ev.x, ev.y);
      }
      // PROBLEM -> adding button messes up drag icon
      button = new Button({
        label: 'Dijit Button'
      });
      button.placeAt(cp1.containerNode);

      // Make draggable
      domProp.set(cp1.domNode, 'draggable', 'true');
      cp1.on('dragstart', onDragStartHandler1); // otherwise FF doesn't show drag icon

      // Add to document
      cp1.placeAt(document.body);
      cp1.startup();

这是your fiddle, fixed.

修改

我想我不应该真的说'固定'，更像是工作接地......奇怪的是，默认情况下它不会在拖动过程中显示元素，但正如你所说，也许这是一个奇怪的道场相关的事情。无论如何，似乎“setDragImage”可能在这种情况下明确定义用户反馈......

Answer 2

我从来没有找到这些CSS样式搞乱HTML5拖放的确切原因（我的猜测是浏览器试图构建一个包含'offscreen'元素的非常大的拖放图像）。

但是，我发现了两种解决方法（CSS样式附加到我想要拖放的元素的自动创建的子节点上）：

• 删除带有违规CSS样式的dom节点
• 使用违规的CSS样式将display:none样式添加到dom节点

两种解决方法都可以恢复预期的HTML5拖放行为;我还没有注意到任何不必要的副作用。

<小时/> 的更新 将z-index设置为较大的负值似乎是一种更好的解决方法：

.dijitOffScreen { 
    top: 0;
    left: 0;
    z-index: -9999;
}