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

Question

我有两个容器，里面有多个项目。第一个包含一些图标，表示可以插入列表的元素。第二个容器是实际列表，元素完全不同（从HTML结构的角度来看）。它有点＆＃34;将项目拖到第二个列表上以创建此内容类型＆＃34;。

它的工作原理如下：

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

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

所以我尝试了这个（没有drop - 来自上面的回调）：

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

这个工作得很好，但它克隆了图标。所以我不知道如何停止这种行为并改为创建新元素。

所以，这是一个截图，以显示我的意思：当图标被删除时，它应该恢复到顶部列表和一个新的＆＃34;灰色容器＆＃34;应该在当前位置创建。

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/