用户上传图片，然后他们将上传的图片拖到页面上的占位符中。他们基本上是在模板网格中设计不同图像的布局。
我已经编写了代码来使用可拖动的图像和可放置的占位符。这使我可以轻松地将图像放入占位符中。一旦图像位于占位符中，就可以移动/拖动图像，以便可以在占位符内看到图像的不同部分。图像（一旦放在占位符中）成为一个新的可拖动对象，受约束，因此用户只能将图像移动到其边缘。
问题是：一旦图像在它们的占位符中，我想将它们从一个占位符拖到另一个占位符。但是因为它们位于将它们剪辑成占位符形状的父元素中，所以并不是那么简单。我最初的想法是：
- 检测鼠标位置（拖动时）何时在占位符之外 10 像素
- 克隆图像并将克隆附加到body标签
- 使克隆的图像跟随鼠标
- 当用户停止在占位符上拖动（鼠标上移）时，在两个占位符之间交换图像（开始原始拖动的那个和触发鼠标上移的那个）。
沿着这些思路，我写了一些在占位符上使用 mouseup 的东西，并在全局变量中跟踪当前拖动的图像。我在这里有一个例子：http: //goo.gl/0cXCM
我正在重写该示例，因此我还可以在可能的情况下使用 Jquery UI droppable 将新图像拖到占位符中。可放置的代码比该示例中的代码更容易使用，并且允许我“还原”图像并将其动画回列表，如果它没有放在占位符上。
上面的第 1-3 点很简单，但是因为克隆的图像不是通过实际拖动初始化的真正可拖动的，所以它不会“拖放”到可拖放的占位符上。这就是为什么我最初在没有 droppable 的情况下编写它的原因。
我努力了：
- 使克隆的图像可拖动并使用触发器在克隆上触发 mousedown/dragstart 事件。（不工作）
- 在 Stack Overflow 上搜索有关开始拖动的问题，但我发现主要是关于从单击另一个元素开始拖动。我没有点击可以使用。
更多信息：单击鼠标，然后移动并开始拖动占位符中的图像。当鼠标仍然向下并在占位符之外移动 10 px 时，克隆的图像会附加到页面上。在 mousemove 上，克隆图像的位置会更新。一直以来，鼠标仍然向下。唯一可以在删除克隆图像时识别它的（我认为）是占位符上的 mouseup 事件。
有没有更好的方法来让它工作？可以连接克隆的图像以使用一些合理的标准可放置代码吗？