jQuery UI对拖动效果最佳;跌落转型

Question

标题可能听起来有点奇怪，但它没有效果。

我下面有一个工具栏和一个画布。我想要的是有人可以使用以下条件将工具栏按钮（<button/>）拖到画布中：

• 原始按钮停留在原位
• 当按钮被删除时，它实际上是一个不同的元素，例如：<div/>
• 画布的某些区域无法删除，这些区域取决于选择器

想法是画布是物品的容器。有些物品本身可能是容器，有些则不是。当执行D＆amp; D操作时，丢弃的项目只能在这样的容器内。

更糟糕的是，这些项目实际上是有序的，而不是绝对位置（我目前正在使用jQuery的可排序效果） - 这是预期的效果。

结构：

<div id="toolbar">
    <button class="add-item"> Add Item </button>
    <button class="add-container"> Add Container </button>
</div>

<div id="canvas">
    <span class="item"> Caption 1 </span>
    <span class="container">
        Caption 2
        <span class="items">
            <span class="item"> Caption 3 </span>
        </span>
    </span>
</div>

脚本：

$('#canvas, .container').sortable({
    "revert": true,
    "connectWith": '#canvas, .container>.items',
    "containment": '#canvas',
});

$('#toolbar button').droppable(/* ??? */);

到目前为止，我的主要问题是可放置的部分。有很多（合理的）“怪癖”使它与我的系统不兼容。

链接：

• http://jqueryui.com/demos/sortable/
• http://jqueryui.com/demos/draggable/
• http://jsfiddle.net/hhmaC/7/ <- Example JSFiddle