1

内部に複数のアイテムが入ったコンテナが 2 つあります。最初のものには、リストに挿入できる要素を表すいくつかのアイコンが含まれています。2 番目のコンテナーは実際のリストであり、要素は (HTML 構造の観点から) 完全に異なります。「アイテムを2番目のリストにドラッグして、このコンテンツタイプを作成します」のようなものです。

次のようにうまく動作します：

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'
});

これはほぼ問題なく動作しますが、アイコンが複製されます。したがって、この動作を停止して代わりに新しい要素を作成する方法がわかりません。

つまり、ここにスクリーンショットがあります。アイコンがドロップされると、トップリストに戻り、現在の位置に新しい「灰色のコンテナ」が作成されるはずです。

例

4

1 に答える 1

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/

于 2012-10-11T11:47:07.853 に答える