11

アイテムを動的に追加するドラッグ可能/ソート可能なリストのセットがありますが、問題は、アイテムが追加されると、それらを新しいリストに移動できないことです。ここで機能を確認できます：http：//jsfiddle.net/Y4T32/2/

使用可能なリストからターゲットリストの1つにアイテムをドラッグすると、私が意味していることがわかります。次に、「コールアウト」を追加して、新しいアイテムをターゲット列の1つにドラッグしてみます。

私はここで私が望むように機能する別の答えを見つけましたが、彼らが得た結果を再現することができませんでした（そしてもちろん、今は答えを見つけることができません）。私がここで間違っていることについての洞察はありますか？

4

1 に答える 1

19

更新された回答

.draggable()追加される各要素を呼び出す必要があります。初期化時に使用するjQueryセレクターは、現在存在する要素にのみ適用され、作成する要素には適用されません。

動作するはずのJSは次のとおりです。

var draggable_opts = {
            connectToSortable: ".sph-callout-portlet",
            helper: "clone",
            opacity: 0.75,
            revert: 'invalid',
            stop: function(event, ui) {
                //alert(ui)
            }
        };

$(function() {
    $( ".sph-callout-portlet" ).sortable({
        opacity: 0.75,
        placeholder: "ui-state-highlight",
    }).disableSelection();

    $( "#sph-callout-portlet-avail li" ).draggable(draggable_opts);

    $(document).on("click",'#addNewCo',function(e){
        e.preventDefault();
        var newCo = $('<li>New Callout</li>').draggable(draggable_opts);
        $('#sph-callout-portlet-avail').append(newCo);
    });
});​

http://jsfiddle.net/SGevw/

于 2012-05-16T20:42:02.180 に答える