带有包含的JQuery UI可拖动图像。如何将图像拖出其父（包含）元素

Question

用户上传图片，然后将上传的图片拖到页面上的占位符中。他们基本上是在模板网格中设计不同图像的布局。

我编写的代码使用draggable for images和droppable for the place-holder。这使我可以轻松地将图像放入占位符。一旦图像在占位符中，图像可以被移动/拖动，从而可以在占位符内看到图像的不同部分。图像（一旦掉落在占位符中）变成一个新的可拖动的，因此用户只能将图像移动到其边缘。

问题是：一旦图像在他们的占位符中，我想将它们从一个占位符拖到另一个占位符。但是因为它们位于一个父元素内，它将它们剪辑成占位符的形状并不是那么简单。我最初的想法是：

1. 检测鼠标位置（拖动时）是否在外10个像素 占位符
2. 克隆图像并将克隆附加到正文 标签
3. 使克隆的图像跟随鼠标
4. 当用户停止拖动（mouseup）时 占位符，交换两个占位符之间的图像（一个 这开始了原始的拖拽和触发的原因 鼠标松开）。

沿着这些方向，我写了一些在占位符上使用mouseup的东西，并且我在全局变量中跟踪当前拖动的图像。我在这里有一个例子：http://goo.gl/0cXCM

我正在重写这个例子，所以我也可以使用Jquery UI droppable将新图像拖到占位符中。可放置代码比该示例中的代码更容易使用，并且允许我“还原”图像并将其动画回列表（如果它没有放在占位符上。）

上面的第1-3点很简单，但由于克隆的图像不是真正拖动的初始化，它不会“掉落”到可放置的占位符上。这就是为什么我最初写的没有droppables。

我试过了：

1. 使克隆的图像变得可拖动并触发 使用触发器克隆的mousedown / dragstart事件（不工作）
2. 搜索Stack Overflow以了解有关开始拖动的问题，但是有什么问题 我发现主要是关于从另一个点击开始拖动 元件。我没有点击工作。

更多信息：单击鼠标，然后移动并开始拖动占位符中的图像。当鼠标仍然按下并在占位符外移动10像素时，克隆的图像将附加到页面上。在鼠标移动时，更新克隆图像的位置。此时鼠标仍处于运行状态。我认为唯一可以在删除时识别克隆图像的东西是占位符上的mouseup事件。

有没有更好的方法让它发挥作用？ 可以将克隆的图像连接起来使用一些合理的标准可放置代码吗？