javascript HTML5 拖放效果Allowed and dropEffect
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20471273/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Drag and Drop effectAllowed and dropEffect
提问by Woody
The relationship between these two properties seems to have been the source of some confusion. Based on reading both the MDN siteand MSDNI thought i had figured it out, but now I am not sure....
这两个属性之间的关系似乎是一些混乱的根源。基于阅读MDN 站点和MSDN，我以为我已经弄明白了，但现在我不确定......
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.
我认为当一个元素被拖动时，你可以指定允许它发生什么（即它可以被移动、复制、链接到 - effectAllowed 常量之一）。这是 effectAllowed 属性。
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.
不同的放置目标做不同的事情，所以当你拖动另一个元素时，它可以控制放置时发生的“效果”，这就是“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();
});
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...
我有一个用户可以拖动的框 - 允许的效果是“copyMove”。我有一个将 dropEffect 设置为复制的框，一旦将 dropEffect 设置为移动。我期望的是，当用户拖过“复制框”时，光标将更改以指示将发生复制，当我拖过“移动框”时，光标将更改以指示移动...
Only Chrome behaves as I would expect. Is this because the other browser are wrong or because I don't understand the spec. properly ?
只有 Chrome 的行为符合我的预期。这是因为其他浏览器错误还是因为我不了解规范。适当地 ？
UPDATESome 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.
在 Firefox 和 Chrome 中，如果您有一个表示 effectAllowed 为“复制”的拖动源和一个表示 dropEffect 为“移动”的放置区，那么即使您取消事件，您也无法放置在放置区上。我认为 dropEffect 对读取 ondrop 以查看要执行的操作很有用，但它在 Chrome 上不可用，dropEffect 不会出现在放置处理程序中，例如，尝试读取 dataTransfer.dropEffect 会说 dropEffect 是“ none”，即使您将其设置为拖放。如上所述设置 dropEffect 确实会影响光标的显示方式。
On Firefox, the dropEffect does come through on the dropzone after being set on dragover, but it does notinfluence 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.
在Firefox中，dropEffect来确实在悬浮窗来通过上的dragover被设置之后，但它并不会影响鼠标光标的显示。在 Firefox 窗口中，按 ctrl 键确实会影响鼠标的显示，但不会影响 dropEffect 属性。
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).
规范显示源可以监听 dragend 事件以查看发生了什么。它应该查看此事件中的 dropEffect。Chrome、Mozilla 和 Safari 可以如您所愿地工作，拖放效果出现在 dragend 事件中。在 IE 中，如果允许的效果是一个简单的值，例如“复制”，那么任何成功的删除都会导致该值在 dragend 上显示为 dropEffect。如果 effectAllowed 是像 copyMove 这样的复合值，并且您尝试通过设置 dropEffect 在 dragover 上选择“move”，那么您就不走运了，这将在 dragend 的源中以 dropEffect = "none" 的形式出现。您会被一个光标和一个 dropEffect 卡住，如果该效果是一个简单的值，那么它就是在 dragstart 上设置的 effectAllowed。
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.
在 Mac 上的 Safari 上 - 无法以编程方式设置 effectAllowed，因此设置的任何 dropEffect 都是有效的。当您按下 cmd 键时 effectAllowed 变成“移动”，当您按下 alt 键时 effectAllowed 变成“复制”。此后，它会按您希望的方式工作，如果 dropEffect 不是这些 effectAlloweds 之一，则浏览器不允许放置。
More InfoI'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
更多信息我一直在花一些空闲时间研究 HTML5 拖放库，我在文档中写了很多关于这个和其他问题的内容，如果你有兴趣，请看一下 这个项目
回答by saadsaf
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
我检查了你的小提琴，我在 chrome 和 IE 10 中有相同的响应，即光标在拖动时显示复制符号，但它不复制/移动矩形。您可以从http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop获取帮助
回答by Jeff Alan Midler
I know this is not really the best answer but you could use a UI framework like JQUERY UI which has drag/drop already built in with an array of features. Probably beats rebuilding the feature.
我知道这并不是最好的答案，但您可以使用像 JQUERY UI 这样的 UI 框架，它已经内置了一系列功能的拖/放功能。可能胜过重建功能。
