HTML5本地拖放-检测取消

Question

HTML5本地拖放-检测取消

6

我需要在浏览器窗口之间实现HTML元素的拖放。

当元素从A窗口拖到B窗口时，它必须从A窗口中移除（并添加到B窗口中）。

当拖放被取消时（当用户按下“esc”键，或者有时当拖放功能出现问题时），元素必须返回到其原始位置。

目前我正在做的是保留一个"hasBeenDropped"标志，该标志在dragstart中设置为false，在drop中设置为true。在dragend中，我检查我的标志，如果它没有设置为true，则意味着拖放已在另一个窗口中触发，或者操作已被取消。我需要区分这两种情况（在另一个窗口中放置与取消），以便根据情况采取相应的措施（例如删除窗口或将其替换为其原始位置）。

简而言之：我需要能够检测本机HTML5拖放操作何时被取消（例如当用户按下“esc”键时）。

有没有办法这样做？

- Tim Autin

这里有什么进展吗？我自己也遇到了这个问题。我有一个与你保留以跟踪成功删除的确切类型的清理标志，但是区分不同的取消模式对于我们的应用程序同样是必需的。我尝试仔细检查事件以寻找可以引用的内容，但到目前为止，我只在Firefox中有所收获。 - kamelkev

抱歉，目前似乎没有办法。我已经换工作了，所以不再从事这方面的工作，但我没有成功地达到我想要的效果。我记得我所做的是复制而不是移动（这样做，原窗口不需要放置事件）。 - Tim Autin

2个回答

-1

当拖动操作即将结束（通过释放鼠标按钮或按下 Esc 键）时，将会触发 dragend 事件。您可以检查事件属性 "ctrlKey"。如果它为 true，则表示按下了 Esc 键。如有必要，您还可以检查其他属性。例如，在此处查看参考资料：https://developer.mozilla.org/en-US/docs/Web/Events/dragend

祝好，Alex

- AlexL

谢谢，但是对于我来说（在Firefox、Chrome和Safari上），使用ESC键取消操作时ctrlKey为false是正常的。 - Tim Autin

嗨，Tim，是的，没错。看起来我搞混了，抱歉。那么我会使用“drop”事件，并查看是否可以通过“target”或“view”属性检测到窗口。我希望你可以使用它们来获取你要拖放的元素或窗口。你已经看过了吗？ - AlexL

好主意，我没有检查过。但不幸的是它也不起作用，目标元素始终是拖动的 HTML 元素，并且视图始终是当前窗口（如果我从窗口 A 拖到窗口 B，在窗口 A 的 dragend 事件中会得到窗口 A，而在窗口 B 的 drop 事件中会得到窗口 B。我需要在窗口 A 的 dragend 事件中得到窗口 B）。 - Tim Autin

好的，您能提供一个在线示例或jsfiddle，以便我可以检查和详细说明问题吗？ - AlexL

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kamelkev · Accepted Answer

和你一样，我也使用了一个标记来确定是否在其他地方成功地进行了拖放操作，这或多或少意味着它没有被取消。但是，MDN中提供了一种更合适的方法：

结束拖放

一旦拖放完成，在拖放源（与接收dragstart事件的相同元素）处会触发dragend事件。如果拖放成功，则会触发此事件[1]，否则将被取消。但是，您可以使用dropEffect属性来确定所执行的拖放操作。

如果dragend期间dropEffect属性的值为none，则表示拖放已被取消。否则，效果指定执行了哪个操作。在移动操作之后，源可以使用此信息从旧位置删除被拖动的项目。如果用户取消了拖动（通过按Esc键），则mozUserCancelled属性将设置为true，如果拖动因其他原因被取消（例如无效的拖放目标或拖动成功），则该属性将设置为false。

mozilla特定的属性显然不可取，但是dropEffect属性本身对于大多数情况应该足够了。我自己测试过（在iframe中将瓷砖拖入到放置区域中），并且似乎按预期工作。

这是直接从当前MDN页面上摘取的：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Drag_operations#dragend

也许对你不太有用，因为你换了工作，但是这个主题的信息非常难以找到，希望下一个搜索此问题的人能从中受益。