在注入之前拖动新的 DOM 元素并将其他元素推开

Question

所以我打算挂掉手套并放弃，但在此之前我将尝试 StackOverflow。 :)

我想要达到的目标：

我正在构建一个应用程序，其功能之一是创建新的 DOM 元素（主要是样式化的 div）并将这些元素注入当前文档。注入是通过“拖放”功能完成的：用户创建 div，将其拖到他想要的位置（该区域中的其他元素“让开”），然后释放它，从而将 div 固定在它被丢弃的地方。举个例子，它会是这样的：http://vimeo.com/54413541#t=0m42s

问题：

使用 JQuery UI，我已经能够添加所有拖放功能。但是，我无法实现“区域中的其他元素'让开'”的部分。现在，如果我可以控制当前/父文档，这将相当容易。在这种情况下，我会简单地使用 JQuery UI 的可排序行为。但是当前/父文档也是由用户创建的（复制+粘贴 HTML，报废远程 HTML 等）。因此，我无法将 JQuery 的 UI 可排序行为添加到每次都会变化的 HTML。 所以，简而言之，我想取一个新创建的元素，将其拖到任意 HTML 上，将附近的其他元素推开（主要是在垂直轴上），最后将新创建的元素注入用户释放鼠标时的区域。 同样：http://vimeo.com/54413541#t=0m42s

我尝试过的：

我已经尝试了各种与 JQuery 的 UI 可拖动、可放置和可排序行为的组合。这里的主要障碍是 HTML 是任意的，所以我不能想“使这个 div 列表可排序”，因为我不知道是否会有一个 div 列表。

我还尝试在当前悬停的元素上方创建一个占位符 div，以便该占位符为拖动的 div“腾出空间”。但这导致了糟糕的行为和非常糟糕的结果。

首选 JQuery、JQueryUI 或类似的漂亮库中的解决方案。

Answer 1

在目标 HTML 中创建占位符元素是恕我直言，您唯一可行的选择。您需要以某种方式识别可排序元素和 insertBefore 占位符。

结果的糟糕程度仅取决于

1. 您将如何确定放置占位符的位置 - 目标 HTML 中的哪些元素应该是“可排序的”。
   • 您是否对目标 HTML 结构有一些线索 - 您可以在 div 前面添加哪些元素？ （例如，带有<section>s 的一些不错的 HTML5）
   • 如果不是，请尝试一些有根据的猜测（例如，选择所有带有兄弟姐妹的 <div>s）并查看它是否适用于您的典型目标 HTML
2. 视觉表示
   • 尝试在拖动开始时显示占位符以查看被拖动元素可以到达的位置。此时，设置这些占位符的样式，使其可见但不占用空间（例如border:1px; margin:-1px）
   • 将鼠标悬停在要添加的元素上时，将占位符扩展至全高。一些高度变化的快速动画可能会有所帮助。

Answer 2

要将任意 HTML 转换为可排序元素，您是否可以使用 $.children() API 仅修改区域的第一级子级（不是祖先）以移开新内容？

提供一些相关 HTML 示例（两个不同的示例说明它的任意性）有助于了解您面临的限制。