event.dataTransfer.dropEffect in chrome

event.dataTransfer.dropEffect in chrome

本文关键字：chrome in dropEffect dataTransfer event      更新时间：2023-09-26

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

这是

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

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

我得到了一个解决方案，因为这些年它仍然不起作用。

似乎只有 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>

相关文章：