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

Question

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

我想达到的目标:

我正在构建一个应用程序，其中一个功能是创建新的DOM元素(主要是样式div)并将这些元素注入当前文档。注入是通过"拖放"功能完成的:用户创建div，将其拖到他想要它的地方(区域中的其他元素'get out of The way')，然后释放它，从而将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 ?(例如，一些不错的HTML5与<section> s)
   • 如果没有，尝试一些有根据的猜测(例如，选择所有的<div>与兄弟姐妹)，看看它是否适用于你的典型目标HTML
2. 可视化表示
   • 尝试在拖动开始时显示占位符，看看被拖动的元素可以去哪里。在这一点上，样式这些占位符，使他们是可见的，但不占用空间(例如border:1px; margin:-1px)
   • 将鼠标悬停在被添加的元素上时，将占位符扩展到完全高度。一些快速动画的高度变化可能会有所帮助。

Answer 2

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

有几个HTML的例子(两个不同的例子，说明它可以是多么随意)将是有用的，以了解您所面临的约束。