HTML5拖放effectAllowed和dropEffect [英] HTML5 Drag and Drop effectAllowed and dropEffect

问题描述

这两个属性之间的关系似乎是一些混乱的根源。基于阅读 MDN网站和 MSDN 我以为我想出了，但是现在我不确定....

我想，当一个元素被拖动，你可以指定允许发生什么（即它可以移动，复制，链接到 - 一个effectAllowed常量）。这是effectAllowed属性。

不同的拖放目标执行不同的操作，因此当拖放另一个元素时，它可以控制在拖放上发生的效果，这是dropEffect属性。所以我设置了一个简单的例子来测试这个理论。

JSFiddle

  $（[draggable ='true']）。on ，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
更多信息。 p>在Firefox和Chrome中，如果你有一个dragsource表示effectAllowed是复制，一个dropzone表示dropEffect是move，那么即使取消该事件，你也不能放在放置区域。我认为dropEffect将有用读取ondrop看到做什么，但它不是可用的Chrome，dropEffect不出现在放置处理程序，例如。试图读取dataTransfer.dropEffect将说dropEffect是无，即使你设置它拖放。如上所述设置dropEffect会影响光标的显示方式。

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

规格显示来源可以监听dragend事件以查看发生了什么。它应该看看这个事件中的dropEffect。 Chrome，Mozilla和Safari的工作方式与您希望的一样，dragend事件中会显示拖放效果。在IE中如果允许的效果是一个简单的值，例如。 copythen any succesfull drop result that this value appear as the dropEffect on dragend。如果effectAllowed是一个复合值，如copyMove，并且您试图通过设置dropEffect在拖放时选择移动，你运气不好，这将通过dragEffect =无来源在dragend。你被一个光标&一个dropEffect，这是在dragstart上设置的effectAllowed，如果该效果是一个简单的值。有趣的是，当你从IE11拖到一个原生应用程序时，dropEffect看起来好像是来自（至少我假设为早）。

其他注意事项

在Safari上的mac上 - effectAllowed不能被编程设置，因此设置的任何dropEffect都是有效的。当你按下cmd键时，effectAlowed变成move，当你按下alt键时，effectAlowed变成copy。此后，它的工作原理，如果你希望，如果dropEffect不是这些effectAlloweds之一，下降是不允许的浏览器。

更多信息
我一直在花一些空闲时间处理HTML5拖放库我写了一堆这个和其他问题在文档中，如果你有兴趣，请看看
项目

解决方案

，即光标在拖动时显示复制符号，但不会复制/移动矩形。您可以从 http://www.w3schools.com/html/tryit获取帮助。 asp？filename = tryhtml5_draganddrop

The relationship between these two properties seems to have been the source of some confusion. Based on reading both the MDN site and MSDN I thought i had figured it out, but now I am not sure....

I figured that when an element is dragged, you can specify what is allowed to happen to it (i.e. it can be moved, copied, linked to - one of the effectAllowed constants). This is the effectAllowed property.

Different drop targets do different things, so when you dragover another element it can control which "effect" takes place on the drop, this is the "dropEffect" property. So i set up a simple example to test this theory out.

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();
});

I have a box the user can drag - the effects allowed are "copyMove". I have one box that sets dropEffect to copy, and once that sets dropEffect to move. What i expect is that when the user drags over the "copy box" the cursor will change to indicate a copy will happen, as I drag over the "move box" the cursor changes to indicate a move...

Only Chrome behaves as I would expect. Is this because the other browser are wrong or because I don't understand the spec. properly ?

UPDATE Some more information from fiddling with this.

In both Firefox and Chrome, if you have a dragsource which indicates the effectAllowed is "copy" and a dropzone that says dropEffect is "move" then you cannot drop on the drop zone even if you cancel the event. I thought that dropEffect would be useful to read ondrop to see what to do, but it isn't available on Chrome, the dropEffect does not appear on the drop handler, e.g. trying to read the dataTransfer.dropEffect will say that the dropEffect is "none" even though you set it on dragover. Setting the dropEffect as noted above does influence the way the cursor is displayed.

On Firefox, the dropEffect does come through on the dropzone after being set on dragover, but it does not influence the display of the mouse cursor. On Firefox windows pressing the ctrl key does affect the display of the mouse, but does not affect the dropEffect property.

The spec shows that the source can listen for the dragend event to see what happened. It should look at the dropEffect within this event. Chrome, Mozilla and Safari work as you would hope here, the drop effect appears in the dragend event. In IE if the effect allowed is a simple value e.g. "copy" then any succesfull drop results in this value appearing as the dropEffect on dragend. If the effectAllowed was a compound value like copyMove and you tried to select "move" on dragover by setting the dropEffect, you're out of luck, that will come through as dropEffect = "none" at the source on dragend. You are stuck with one cursor & one dropEffect and that is the effectAllowed set on dragstart if that effect is a simple value. Interestingly the dropEffect it seems does come through when you drag into a native application from IE11 at least (and i assume earlier).

Other notes

On Safari on a mac - effectAllowed cannot be set programatically, therefore any dropEffect that gets set is valid. When you press the cmd key the effectAllowed becomes "move" and when you press the alt key the effectAllowed becomes "copy". Thereafter it works as you would hope, if the dropEffect is not one of these effectAlloweds the drop is not allowed by the browser.

More Info I've been spending some spare time working on an HTML5 drag and drop library i wrote a bunch more about this and other issues in the docs for it, if you're interested please take a look at the project

解决方案

I checked ur fiddle and I have same response in chrome and IE 10, i.e. The cursor shows copy sign while dragging but it doesn't copy/move the rectangle. You can take help from http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

这篇关于HTML5拖放effectAllowed和dropEffect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！