jQuery UI在div之间拖放，平滑

我对和库产生了兴趣，因为它们比纯JavaScript编程实践提供了更多的好处

我正在努力实施

我已经看到了jQuery的好处，它可以很容易地为右侧的菜单栏图标提供一种很好的克隆方法，并将其拖动到目标drop div

当我用鼠标选择菜单栏最上方垂直方向上的图标时；任何类型的移动都会触发拖放操作。图标跳转到包含div，但divs源和目标之间没有过渡动画交叉

我希望在选择图标和将其移动到drop div之间实现平稳过渡，而不是直接跳入内容monkey div先生

我还想了解一些关于取消正在进行的拖放操作的信息

请提供有关如何最好地了解jQuery库的这些问题的提示

编辑：下面Nabab提供的解决方案有一些奇怪的效果。首先，我会得到不同的结果，这取决于我是在本地机器上检查还是从web主机服务器下载

在本地测试中，IE9功能良好，图标拖动仅限于包含拖放DIV的containment DIV。通过FF或Chrome进行本地执行，结果很奇怪，拖动项的行为异常

在线web服务器和所有这些服务器的行为方式相同。包容div被忽略，我可以在屏幕上拖动我喜欢的图标，但我希望将拖动限制在content和nav div内

---

关于为什么会发生这种行为，你有什么想法吗？

如果你有一个容器，那么将你的源代码放在这个容器中会更符合逻辑。为什么不把中央空间+按钮空间包装成一个DIV，它将成为容器。执行动画将非常困难，因为项目的位置取决于拖动它的鼠标，如果您的源在容器外部，我无法想象它将如何执行此转换…

此解决方案似乎在IE9中工作！但在FF或Safari中不起作用！对不起，把你的答案降级了。期待进一步的建议！谢谢。我重新检查了所有浏览器的缓存，现在它可以在任何地方工作了。你确实值得表扬。谢谢你，因为这种方法不需要取消操作。只有在drop div上删除时，才会发生正确的事件。简单！我还面临着一些与此相关的其他问题，我把它们作为编辑放在了我的原始帖子中。然后不知何故，它又崩溃了…：FF、Safari和Chrome也存在同样的问题。欢迎任何人提供任何帮助。据我所知，本地服务器和在线服务器之间的差异只能来自cookie、浏览器缓存、文件路径或文件本身，即本地和服务器之间的差异。

$('#artOfBeing').draggable ({ 
    containment: '#dataFrame', 
    cursor: 'pointer', 
    snap: '#dataFrame', 
    helper: 'clone' 
});
    
$('#dataFrame').droppable({
    drop: handleDropEvent   
});