HTML 5 拖放相对于 jQuery UI 拖放的优势

Posted 2023-05-08

【中文标题】HTML 5 拖放相对于 jQuery UI 拖放的优势

【英文标题】：Advantages of HTML 5 Drag and Drop over jQuery UI Drag and Drop

【发布时间】：2012-03-20 10:32:57

【问题描述】：

我正在编写一个新的网络应用程序，它需要支持页面上元素的拖放操作（不是文件拖放）。

这就是这个问题的答案

html5 vs jquery drag and drop

建议使用 Modernizr 来检查浏览器是否支持 HTML5 拖放，并使用该支持或回退到 jQuery UI 等替代方案。

由于它们具有完全不同的模型，这意味着所有拖放代码都必须单独实现和测试（很少有共享实现）。如果 HTML5 拖放对用户有显着的影响，并且如果回退到 jQuery UI 会提供降级的体验，那么这样做似乎是合乎逻辑的。

实现这两种变体是否有显着的好处？

【问题讨论】：

为什么是近距离投票？知道 HTML5 拖放是否有好处似乎是合理的，我不知道这将保证提供双重实现。如果这不是一个有效的问题，请分享原因。

Eric：对我来说，不清楚你想要什么样的答案。这是“优点和缺点是什么”或“我的项目应该使用什么”问题之一。你知道 HTML5 拖放不是跨浏览器，你知道如何回退到 js 实现——这里的技术问题是什么？我承认，我可能会错过它。

@Madmartigan：不，我问的是 HTML5 拖放是否比 jQuery UI 拖放更好。我知道我必须实现 jQuery 版本，因为并非所有浏览器都支持 HTML5。我在关注 HTML5 版本是否有好处（更快、更流畅，等等），我不知道这是否需要在 jQuery UI 开发之上进行额外的开发工作。我在网上看到的答案似乎是“两者都做”，鉴于我目前所知道的，这对我来说没有意义。

【参考方案1】：

我猜想 jQuery 最终会利用内置的浏览器功能，例如 html 5 拖放。

如果不同的浏览器以不同的方式实现它......jQuery会处理它。

【讨论】：

很抱歉投了反对票，我确定您的意思是 jQuery-ui 而不是 jQuery。 wiki.jqueryui.com/w/page/12137878/Draggable

【参考方案2】：

我认为 HTML5 拖放相对于 jQuery 的最大优势是消除了庞大的 jQuery UI 库和 css 文件。

话虽如此，当前的浏览器兼容性问题使得 jQuery 非常需要。

【讨论】：

还有速度。页面上有很多可拖动的 jQuery UI dnd 非常慢。切换到 HTML5 后，页面响应速度更快。但是与 jQUI 相比，HTML5 dnd API 很奇怪并且缺少很多东西:(

【参考方案3】：

好的，两者都实现了，我建议使用 mousedown/mousemove 事件手动执行（基本上就像 jquery UI 一样）。

我同意 jQuery UI 可能有点重，但是有很多教程/代码 sn-ps 可用于自己编写代码。

为什么我推荐手动方法而不是现代浏览器中的本机实现？因为html5 DnD sux！对于当前的浏览器来说，它可能是新的，但它是在 IE5 中的旧实现之后建模的。

如果您正在谈论从桌面在窗口之间移动内容，那么也许我会考虑使用 html5 DnD，因为它具有浏览器/操作系统挂钩。否则，如果您只是在单个网页上移动 DOM 节点，请使用 js 鼠标事件手动执行。

-保罗

【讨论】：

原因是什么？你能把它翻译成技术术语吗？

好的，从技术上讲，html5 dnd 的实现很糟糕。与其重复解释的技术方面，我将在 google 中搜索 html5 拖放 sux。好的，这是前两个结果：quirksmode.org/blog/archives/2009/09/the_html5_drag.html 和 pxdraw.com/HTML5DragAndDropSucks.com/#slide12

就我个人而言，在我开始自己的实现之前，我已经阅读了第一个链接并后悔了。这就是我在这里发帖的原因，以避免其他开发人员一起破解它的痛苦。回首往事，我确信这也是 PKK 的动机，但就像所有将阅读本文然后仍然自己实现 HTML5 DnD 的人一样，我很顽固:)

【参考方案4】：

我正在专门回答有关 dnd 的问题，因为这似乎是您要问的问题。 我认为有些人将 jQuery 与 jQueryUI 混淆了。将原生 HTML5 dnd 与 jQuery 结合使用是很好的组合，无论是在性能上还是在开发时间上。由于 dnd 功能来自 IE 世界，因此浏览器的支持非常全面（当然包括 IE7，甚至可能更早）。使用 jQuery 为您提供了所有跨浏览器 addClass()、removeClass() 等至关重要的实用程序。

另一方面，jQueryUI 提供了大量您可能不需要的功能。由于他们的 dnd 依赖于鼠标事件而不是本地 dnd，因此性能不会那么好。 jQueryUI 不应与 jQuery 混淆。 jQueryUI 已经超过 2.5 年没有收到任何重大更新！ （是的，jQueryUI 1.8rc1 是在 2010 年 1 月发布的）所以，要说他们将来会添加原生支持并不是那么简单，按照他们一直在更新的速度，我不会屏住呼吸。

【参考方案5】：

我刚刚将一个脚本转换为使用基于 HTML5 的拖放可排序脚本而不是 jQueryUI 脚本，因为根据我尝试排序的大小，初始化 jQueryUI 版本需要 19 秒，而 0.19秒来初始化 HTML5 版本。

所以优势：速度