2017 年制作拖放式构建器的最佳方式是什么？是的，有人问过这个问题before，但那是 5 年前的事了，我认为情况已经改变了？ HTML5、jQuery UI 还是现在有其他选择？
最近的一个问题Form Builder From Scratch - HTML 5 Drag and Drop, or JQuery UI Draggable, or What? 也没有得到解答。
任何帮助都会很棒！我已经开始玩这两种方法了（我从来没有使用过 HTML5 或 jQuery UI 的拖放功能，所以我很难做出决定。）而且 jQuery UI 似乎更容易使用和理解，但似乎也很容易出错，嗯至少在codepen中。
【问题讨论】：
标签： javascript jquery html jquery-ui drag-and-drop
我们刚刚对使用 ReactJs 的拖放进行了一些研究，老实说，另一边有点难过。因此，如果您正在寻找纯 HTML 5 拖放，这是一个向您展示您是多么糟糕的绝佳网站： https://caniuse.com/#feat=dragndrop
所以在撰写本文时，如果您使用纯 HTML5 DND，您真的不会涵盖移动场景。
现在这里没有列出的是所有边缘情况，以使该功能在浏览器中看起来相同。在 Edge、Firefox 和 Chrome 之间，一个添加了一个图标来显示您正在拖动项目，一个在复制的元素上有轻微的不透明度，一个执行其他操作。无论哪种方式，对齐这些设计（取决于您的设计团队有多烦人）可能很容易（例如，只要拖放有效，就不用关心）到不可能（例如，在我拖动时摆脱图标）。
现在谈到 JQuery，它已经有一段时间了，但这并不意味着它也没有它的缺点。因为它运行在 JS 层而不是浏览器本身，根据系统中发生的情况，它可能会感觉有点慢。此外，我确实注意到它开始拖累恼人的情况，例如当您尝试滑动页面以在 Edge 中滚动时。对我们来说，这也可能是糟糕的编程。
我认为最终我们只是将 React Dnd 与 HTML5 后端一起使用。似乎工作得很好，对于那些移动场景，我们只有菜单选项以不同的形式公开相同的功能。它最终有助于提高可访问性，因为通过键盘快捷键解释所有拖放操作有点烦人。
不确定这是否有帮助，但如果我记得（大约 6 个月）那就是失败了。
【讨论】：
我建议使用 jqueryui 和一个叫做 touch punch 的小技巧，它可以让您捕获移动设备的事件，例如屏幕上的 ontouch。我更喜欢 jqueryui，因为它比 HTML5 更完整，并且相对易于使用。 链接： http://touchpunch.furf.com
祝你好运和问候
【讨论】：