7

我有一个脚本，它根据 event.dataTransfer.dropEffect 的值确定拖放操作的结果。我将属性 event.dataTransfer.effectAllowed 设置为值“copymove”。在 Firefox 中，dropEffect 的值默认为“移动”，当我在拖动过程中按 ctrl 键时为“复制”。在 Chrome 中，dropEffect 的值始终为“none”。Chrome 不支持这个 API 吗？

4

2 回答 2

4

这是 Chrome（和 Internet Explorer）中的一个错误。对于 Chrome 有一个错误报告： https ://bugs.chromium.org/p/chromium/issues/detail?id=39399

作为一种解决方案，您必须在拖动事件时将 dropEffect 的内容存储在全局变量中，并使用其内容而不是 event.dataTransfer.dropEffect 如果该值在 drop 事件中为“none”。

于 2017-05-10T12:22:32.650 回答
0

我为此找到了解决方案，因为这些年来它仍然无法正常工作。

只有 Firefox 似乎会自动更新 event.dataTransfer.dropEffect 的值。

在所有其他浏览器中，您必须通过使用键盘事件（event.ctrlKey 和 event.shiftKey）来执行一些额外的步骤（在下面的脚本中提供）来捕获 CTRL 和 SHIFT 键的状态并更新 event.dataTransfer.dropEffect。

解决方案

我在此处附加的基本脚本更新了 event.dataTransfer.dropEffect 并使事情在 Chrome 和 Edge 中也能正常工作。

document.addEventListener("dragover", (event) => {
  event.preventDefault();
  var c = event.ctrlKey;
  var s = event.shiftKey;
  var dropEffect = updateDropEffect(c, s);  
  event.dataTransfer.dropEffect = dropEffect;

  document.getElementById("div1").innerHTML = "drag type: " + dropEffect;;

    }, false);


function updateDropEffect(c, s) {
    // control, shift, none behaviors
    if (c && s) { return "link"; }
    if (c) { return "copy" }
    return "move";
  }
<div id="drag1"draggable="true">DRAG THIS TEXT BUT KEEP MOUSE BUTTON PRESSED WHILE PRESSING CTRL + SHIFT KEY 
  <br> You will notice that mouse pointer icon changes, not only in Firefox but also in in Chrome and Edge
  <br><br>
</div>
<div id="div1">*** Look here for status of mouse pointer icon *** </div>

于 2022-02-10T08:07:32.000 回答