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

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

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

• 为什么这会导致HTML5拖放在Chrome和FireFox中无法正常运行？
• 隐藏输入元素并保持相同Dojo Dijit按钮行为的替代方法有哪些？（向屏幕外输入元素添加

  display:none

  似乎可行，但这是否会在功能上改变输入的行为，从而改变小部件？）

---

原始问题：

有时候，默认的“ghost”HTML5拖动图像的大小较小，或者根本没有渲染。它因浏览器而异，并且似乎涉及到与Dojo Dijit的交互

在将Dijit按钮添加到可拖动的Dijit内容窗格后，是什么导致FireFox中的拖动图标变小，而在Chrome中根本不呈现

简单：

var cp1=新内容窗格({
样式：“宽度：400px；高度：124px；背景：红色”，
内容：“cp1:‘ghost’拖动图标很小或不可见：（
“，
});
//拖拉
set（cp1.domNode，'draggable'，'true'）；
on（'dragstart'，onDragStartHandler）；//否则FF不显示拖动图标
//问题->添加按钮会弄乱拖动图标
按钮=新按钮（{label:'Dijit button'}）；
按钮位置（cp1.containerNode）；

更新：

• 除了不正确地呈现拖拽图标外，其他HTML5拖拽事件也不再正常工作。在Chrome上，添加

  dragover

  和/或

  end

  事件后，整个文档就会消失。在FireFox上，拖拽事件的处理速度明显较慢
• 添加通用HTML按钮输入而不是Dijit按钮不会导致任何这些副作用：Dojo Dijit肯定会以某种方式干扰

更新2:

• 根本原因：Dijit按钮通过

  dijitOffScreen

  类隐藏HTML按钮输入元素。从元素中删除

  left:10000px！重要

  和

  top:10000px！重要

  样式以显示空白按钮为代价恢复拖放。信用：

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

      // 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();

//首先，创建带有奇怪拖动图标的可拖动内容窗格
var cp1=新内容窗格({
样式：“宽度：400px；高度：124px；背景：红色”，
内容：“cp1:‘ghost’拖动图标为全尺寸且可见：）
”，
});
var img=document.getElementById（“拖动图像”）；
onDragStartHandler1=功能（ev）{
控制台日志（ev）；
log（'DragStart:'，ev.target.id）；
ev.dataTransfer.setData（“文本”，ev.target.id）；
//在此处定义“重影”图像，并使用适当的偏移量
ev.dataTransfer.SetDragage（img，ev.x，ev.y）；
}
//问题->添加按钮会弄乱拖动图标
按钮=新按钮({
标签：“Dijit按钮”
});
按钮位置（cp1.containerNode）；
//拖拉
set（cp1.domNode，'draggable'，'true'）；
cp1.on（'dragstart'，onDragStartHandler1）；//否则FF不会显示拖动图标
//添加到文档
cp1.placeAt（文件正文）；
cp1.startup（）；

这是

编辑：

---

我想我真的不应该说“固定的”，更像是工作周围的。。。奇怪的是，默认情况下，它在拖动过程中不显示元素，但是，正如您所说，这可能是一个奇怪的dojo相关的东西。不管怎样，“setDragImage”似乎可以在这种情况下毫不含糊地定义用户反馈…

我从来没有找到那些CSS样式破坏HTML5拖放的确切原因（我猜是浏览器试图构建一个包含“屏幕外”元素的非常大的拖放图像）

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

• 删除具有不符合CSS样式的dom节点
• 将

  display:none

  样式添加到具有不符合CSS样式的dom节点

这两种解决方案都恢复了预期的HTML5拖放行为；我还没有注意到任何不必要的副作用

---

更新： 将z指数设置为较大的负值似乎是更好的解决方法：

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

---

关于更新：在某些情况下，负z索引的解决方法没有帮助。设置显示：我认为没有比这更可靠的解决方案了。

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