HTML5拖放与jQuery UI拖放

Question

2017年制作拖放构建器的最佳方法是什么？ 是的， 之前已经问过这个问题，但那是5年前，我认为事情已经发生了变化？ HTML5，jQuery UI还是现在还有其他选择吗？

一个更新的问题表单生成器从头开始 - HTML 5拖放，或JQuery UI可拖动，或什么？ 也没有得到答复。

任何帮助都会很棒！ 我已经开始兼顾两者了（我从来没有使用过HTML5或jQuery UI的Drag and Drop，所以我很难做出决定。）jQuery UI似乎更容易使用和理解，但也似乎非常错，很好至少在codepen中。

Answer 1

我们刚刚用ReactJs对Drag and Drop进行了一些研究，老实说对方有点伤感。 因此，如果您正在寻找纯HTML 5拖放，这是一个很棒的网站，向您展示你是如何搞砸的： https ： //caniuse.com/#feat=dragndrop

因此，截至撰写本文时，如果你使用纯HTML5 DND，你真的不会涵盖移动方案。

现在未列出的是所有边缘情况，以使该功能在浏览器中看起来相同。 在Edge，Firefox和Chrome之间，添加一个Icon以显示您正在拖动项目，一个在复制的元素上有轻微的不透明度，而另一个则执行其他操作。 无论哪种方式，对齐这些设计（取决于你的设计团队的烦恼）可以很容易（例如，只要拖放工作不关心）到不可能（例如在我拖动时摆脱图标）。

现在谈到JQuery，它已经存在了一段时间，但这并不意味着它也没有它的缺点。 因为它在JS层而不是浏览器本身中运行，取决于系统中发生了多少，它会感觉有点慢。 此外，我确实注意到它开始拖动恼人的情况，例如当您尝试滑动页面以在Edge中滚动时。 这本身也可能是糟糕的编程。

我想最后我们只使用了React Dnd和HTML5后端。 似乎工作得很好，对于那些移动场景，我们只有菜单选项，以不同的形式公开相同的功能。 它最终帮助了可访问性，因为解释通过键盘快捷键拖放的所有操作都有点烦人。

不确定这是否有帮助，但如果我记得（并且已经有大约6个月）那就是失败了。

Answer 2

我建议使用jqueryui和一个名为触摸打孔的小黑客，它允许您捕获移动设备的事件，如屏幕上的ontouch。 我更喜欢jqueryui，因为它比HTML5更完整，相对容易使用。 链接： http ： //touchpunch.furf.com

祝你好运和问候