将项目拖到可排序的特定位置

Question

我有两个容器，里面有多个物品。第一个包含一些图标，代表可以插入到列表中的元素。第二个容器是实际的列表，元素完全不同（从 HTML 结构的角度来看）。这有点像“将一个项目拖到第二个列表中以创建此内容类型”。

它可以像这样正常工作：

this.templates.draggable({ revert: true });
this.content.droppable({
    drop: function(event, ui) {
        // create element for this list
        // prepend item to the list
    }
});

问题是，我只能添加或附加元素。因此，用户丢弃它的位置无关紧要。但实际上新元素应该在它被删除的元素之间创建。

所以我尝试了这个（没有上面的drop-callback）：

this.templates.draggable({
    revert: true,
    helper: 'clone',
    connectToSortable: '#idofcontainer'
});

这几乎可以正常工作，但它会克隆图标。所以我不知道如何停止这种行为并改为创建新元素。

所以，这里有一个屏幕截图来说明我的意思：当图标被放下时，它应该恢复到顶部列表，并且应该在当前位置创建一个新的“灰色容器”。

Answer 1

我相信这是您的解决方案：

this.templates.draggable({
    revert: true,
    helper: 'clone',
    connectToSortable: '#idofcontainer'
    stop: function(event,ui) { $('#idofcontainer>a').replaceWith('<div>' + $(this).text() + '</div>'); }
});
this.content.sortable({ cancel: '#idofcontainer>div' /* to stop moving divs under container */ });

JsFiddle：http://jsfiddle.net/BerkerYuceer/KZeBq/