HTML5拖放使用按钮和TD

我试图拖动一个按钮拖放到一个TD，它似乎并不奏效下降。拖动很容易。但我似乎无法设置td来接受这个下降。这里是jsFiddle link HTML5拖放使用按钮和TD

我已经看过的文件上some excellent articles但仍无法弄清我做错了。

来源

2012-06-14 tinkerr

-1

您可以使用jQueryUI的轻松实现拖动和拖放：

jQueryUI的：Draggable & Droppable

来源

2012-06-14 04:06:03 DaneSoul

谢谢，但我希望使用本机HTML5元素。（如果支持，它应该可以工作，该死的!! :-)如果我不知道如何使它工作，我会使用一个库。 – tinkerr

经历了这些跨平台的疯狂浏览器违规行为，以及[这个咆哮声]（http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html），我相信DaneSoul有正确的答案。这不是我想要的，而是我需要的。 – tinkerr

良好的链接tinkerr！有趣的东西，我现在知道，以避免HTML5拖放。 –

它看起来对我来说，在你的dragenter处理警报呼叫的问题。我已更新fiddle中的调试语句，以使用console.log而不是alert，这似乎会导致Chrome最新版本中的预期行为。

console.log用于输出调试语句比alert方法，这不仅是因为它远不如侵入一个更好的选择。如果您担心浏览器中不支持控制台的错误，那么您应该考虑使用HTML5 boilerplate中包含的shiv。

在跨浏览器支持方面，我的建议是检查拖放在所有你希望支持的浏览器完全支持。 caniuse.com对于这样的检查来说是一个很好的资源，不过你可以选择测试你在每个目标浏览器中链接到的一个演示。如果不是的话，那么你应该采取DaneSoul的建议，并考虑jQueryUI，旨在通过这些令人沮丧的差距和特性来支持某些功能。

来源

2012-06-14 10:23:03

谢谢。您的小提琴在Chrome/Windows中运行，但不在Chrome/Mac上运行。任何想法如何让你的小提琴在所有平台上工作？ PS - 你从dragenter处理程序中删除了警报。放置处理程序仍在使用警报。我没有看到任何控制台日志记录，所以也许你发送了错误的链接？ – tinkerr

对不起，显然没有保存到我的小提琴的变化。尝试在答案更新的链接，并让我知道它是否修复它在Mac。 –

适用于Chrome/Win7，Safari/Mac。不适用于Chrome/Mac或任何Firefox。在Safari/Windows上，dragEnter可以工作，但不是拖放。这太疯狂了。有趣的是，dragEnter日志会多次触发。它应该只发射一次。 – tinkerr

HTML5拖放使用按钮和TD

回答

相关问题