为什么这种CSS样式会干扰HTML5的拖放?(位置:绝对;左:-10000px）

Why does this CSS style interfere with HTML5 drag and drop? (position: absolute; left: -10000px)

本文关键字：位置 绝对 -10000px 拖放 CSS 样式 HTML5 干扰 为什么      更新时间：2023-09-26

Dojo Dijit按钮使用CSS:在屏幕外隐藏"真实"按钮

.dijitOffScreen { 
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}
  • 为什么这会导致HTML5拖放在Chrome和FireFox中无法正常工作
  • 有哪些替代方法可以隐藏输入元素并保持相同的Dojo Dijit Button行为（将display:none添加到屏幕外输入元素似乎有效，但这在功能上会改变输入的行为，从而改变小部件吗？）

原始问题：

有时，默认的"重影"HTML5拖动图像的大小较小或根本没有渲染。它因浏览器而异，并且似乎涉及到与Dojo Dijits的交互。

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

简单jsFiddle repo:

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:

  • 根本原因：DijitButton通过dijitOffScreen类隐藏了一个HTML按钮输入元素。从元素中删除left: 10000px !important和top: 10000px !important样式将以显示空白按钮为代价恢复拖放。署名：Kenneth G.Franqueiro

根据规范，您可以使用"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();

这是你的小提琴，修好了。

编辑：

我想我真的不应该说"固定"，更像是解决问题。。。奇怪的是，它在拖动过程中默认不显示元素，但是，正如您所说，也许这是一个奇怪的dojo相关的事情。无论如何，在这种情况下，"setDragImage"似乎是为了明确定义用户反馈。。。

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

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

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

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

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

.dijitOffScreen { 
    top: 0;
    left: 0;
    z-index: -9999;
}
相关文章：