html跳转 effect,javascript – HTML5拖放effectAllowed和dropEffect

这两个属性之间的关系似乎是一些混乱的根源。基于阅读

the MDN site和

MSDN我以为我已经弄清楚了，但现在我不确定….

我想到当拖动一个元素时，可以指定允许发生的元素(即可以移动，复制，链接到一个effectAllowed常量)。这是effectAllowed属性。

不同的放置目标做不同的事情，所以当你拖动另一个元素时，它可以控制在“drop”上发生哪个“effect”，这是“dropEffect”属性。所以我建立了一个简单的例子来测试这个理论。

$("[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的行为正如我所料。这是因为其他浏览器错误，还是因为我不明白规格。正确的

UPDATE

一些更多的信息从这个。

在Firefox和Chrome中，如果您有一个dragsource表示effectAllowed是“copy”，并且dropzone表示dropEffect为“move”，那么即使取消该事件，也不能放在放置区域。我认为dropEffect对于读取ondrop会有用，看看该怎么做，但Chrome不可用，dropEffect不会出现在drop handler上，例如试图读取dataTransfer.dropEffect会说dropEffect是“none”，即使你把它设置为dragover。如上所述设置dropEffect会影响光标的显示方式。

在Firefox上，dropEffect在拖放后设置在dropzone上，但不会影响鼠标光标的显示。在Firefox窗口中按ctrl键会影响鼠标的显示，但不影响dropEffect属性。

该规范表明，源可以监听dragend事件以查看发生了什么。它应该在此事件中查看dropEffect。 Chrome，Mozilla和Safari可以像您希望的那样工作，拖放效果会显示在dragend事件中。在IE中，如果允许的效果是简单的值，例如“copy”然后任何成功的drop将导致该值在dragend上显示为dropEffect。如果effectAllowed是复合值，如copyMove，并且您尝试通过设置dropEffect选择“移动”，那么您将无法运行，这将在dragend的源代码中以dropEffect =“none”的形式出现。你被卡住了一个光标&一个dropEffect，那就是如果该效果是一个简单的值，那么在拖动时设置的effectAllowed是有效的。有趣的是，当您至少从IE11拖入本机应用程序(并且我假设较早)时，dropEffect似乎是通过的。

其他笔记

在Safari上的mac-effectAllowed无法以编程方式设置，因此任何设置的dropEffect都是有效的。当您按下cmd键，effectAllowed变为“move”，当您按alt键时，“EffectAllowed”变为“copy”。此后，它可以像您所希望的那样工作，如果dropEffect不是这些effectAllow中的一个，浏览器不允许该拖放。

更多信息

我已经花了一些空闲时间在HTML5拖放库上编写了一些关于这个文档的其他问题，如果你有兴趣，请看看

the project