HTML5拖放效果允许和dropEffect

Question

这两个属性之间的关系似乎是一些混乱的根源.基于读取MDN站点和MSDN,我以为我已经弄明白了,但现在我不确定....

我认为当拖动一个元素时,你可以指定允许它发生的事情(即它可以移动,复制,链接到 - effectAllowed常量之一).这是effectAllowed属性.

不同的drop目标会做不同的事情,所以当你使用另一个元素时,它可以控制drop上发生的"效果",这就是"dropEffect"属性.所以我设置了一个简单的例子来测试这个理论.

的jsfiddle

$("[draggable='true']").on("dragstart", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.effectAllowed = "copyMove";
    dt.setData("text/plain", "Foo");
});

$("#dropZoneCopy").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "copy";
    e.preventDefault();
});

$("#dropZoneMove").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "move";
    e.preventDefault();
});

我有一个用户可以拖动的框 - 允许的效果是"copyMove".我有一个框设置dropEffect复制,一旦设置dropEffect移动.我期望的是,当用户拖过"复制框"时,光标将改变以指示将发生复制,因为当我拖动"移动框"时,光标变化以指示移动...

只有Chrome的行为符合我的预期.这是因为其他浏览器是错误的还是因为我不了解规范.好吗？

更新 来自摆弄这个的更多信息.

在Firefox和Chrome中,如果你有一个dragsource,表明effectAllowed是"copy",而dropzone就是dropEffect是"move",那么即使你取消了这个事件,你也不能放弃掉落区域.我认为dropEffect对于阅读ondrop看看该做什么很有用,但它在Chrome上不可用,dropEffect不会出现在drop handler上,例如尝试读取dataTransfer.dropEffect会说dropEffect是"没有"即使你把它放在dragover上.如上所述设置dropEffect确实会影响光标的显示方式.

在Firefox中,dropEffect来确实在悬浮窗来通过上的dragover被设置之后,但它并不会影响鼠标光标的显示.在Firefox窗口上按ctrl键确实会影响鼠标的显示,但不会影响dropEffect属性.

规范显示源可以监听dragend事件以查看发生的情况.它应该查看此事件中的dropEffect.Chrome,Mozilla和Safari正如您所希望的那样工作,dragend效果出现在dragend事件中.在IE中,如果允许的效果是一个简单的值,例如"复制",则任何成功的下降都会导致此值显示为drand上的dropEffect.如果effectAllowed是一个像copyMove这样的复合值,并且你试图通过设置dropEffect选择"移动"dragover,那么你运气不好,那将在dragend上的源码中作为dropEffect ="none"来实现.如果该效果是一个简单的值,那么你会遇到一个游标和一个dropEffect,这就是在dragstart上设置的effectAllowed.有趣的是,当你从IE11至少拖入一个本机应用程序(我之前假设)时,它似乎确实会出现dropEffect.

其他说明

在Mac上的Safari上 - 无法以编程方式设置effectAllowed,因此任何设置的dropEffect都是有效的.当您按下cmd键时,effectAllowed变为"move",当您按下alt键时,effectAllowed变为"copy".此后它可以正常工作,如果dropEffect不是这些effectAlloweds中的一个,则浏览器不允许删除.

更多信息 我花了一些时间在HTML5拖放库上工作,我在文档中写了更多关于这个和其他问题的文章,如果你有兴趣请看看 项目

Answer 1

看看https://web.dev/drag-and-drop/

function handleDrop(e) {
  e.stopPropagation(); // Stops some browsers from redirecting.
  e.preventDefault();

  var files = e.dataTransfer.files;
  for (var i = 0, f; f = files[i]; i++) {
    // Read the File objects in this FileList.
  }
}