jQuery UI 在 DIV 之间拖放，平滑

Question

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

我正在尝试实现a drag and drop GUI for my hobby site。

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

我已经看到了 jQuery 的好处，它可以轻松地为右侧的菜单栏图标（被拖到目标放置 div）提供一种很好的克隆方法。

当我用鼠标选择右侧垂直菜单栏的最顶部图标时；任何类型的移动都会触发拖放操作。图标跳转到容器#div（在 div（源和目标）之间没有过渡动画。

我希望在我选择图标和将其移动到放置 div 的时间之间实现平滑过渡，而不是直接跳转到内容先生。猴子 div。

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

请提供有关如何最好地学习 jQuery 库的这些问题的提示。

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

在本地测试中，IE9 运行良好，图标拖动仅限于包含拖放 div 的容器 DIV。 FF 或 Chrome 本地执行，结果很奇怪，拖拽项的行为很奇怪。

在线网络服务器和它们的行为方式都是一样的。包含 div 被忽略，我可以在屏幕上随意拖动图标，这很实用，但我想将拖动限制在内容和导航 div 内。

关于为什么会发生这种行为的任何想法？

Answer 1

如果你有一个容器，将你的源放在这个容器内会更合乎逻辑。为什么不将中心空间 + 按钮空间包装在 DIV 中，这将成为容器。执行动画将非常困难，因为项目的位置取决于鼠标（拖动它），并且如果您的源在容器之外，我无法想象它将如何执行此转换...