4

私はjQueryに少し慣れていないので、誰かが私を助けてくれることを願っています.

(li) が削除された後、要素 (li) を別の要素 (div) に変更しようとしています。

サンプルコード:

$("#inputEl>li").draggable({ 
    revert: true, 
    opacity: 0.4,
    helper: "clone"
});
$("#dropEl")
    .droppable({ 
        accept: ".drag",
        hoverClass: "dropElhover",
        drop: function(ev, ui) {
            // change the li element to div here
        }
});

問題は、私が使用するときです

drop: function(ev, ui) {
     $(ui.draggable).replaceWith("<div>Some content</div>");
}

上記の関数がトリガーされると、元のドラッグ可能な要素は無効になります。

最新の jQuery および jQuery UI 安定バージョンを使用しています。

4

2 に答える 2

3

では、元のリストをそのままにして、リスト項目を dropEl にドロップする必要があるのでしょうか? これはどう：

drop: function(ev,ui) {
     $(this).append("<div>Some content</div>");
}

または、リスト要素を div 要素に置き換え、さらに div 要素をドラッグ可能にしたい場合は、これを試すことができます。

drop: function(ev, ui) {
        $(ui.draggable).replaceWith("<div>Some content</div>");
        $("#inputEl>div").draggable({ 
            revert: true, 
            opacity: 0.4,
            helper: "clone"
        });
    }

元のドラッグ可能な呼び出しは、呼び出された時点でのみアイテムをドラッグ可能にします。要素を変更または追加してドラッグ可能にしたい場合は、もう一度 draggable() 関数を呼び出す必要があります。

于 2008-11-14T16:01:04.207 に答える
1

返信ありがとうございます。

あなたの最初のコードは機能しました。さらに、次のようにドロップ可能な div を並べ替えることもできます。

    drop: function(ev, ui) {
    $(this).append("<div>Some content</div>");
    $("#dropEl").sortable();
}

問題は、リストをdivに変更した後、どのリストがどれであるかをどのように知ることができるかです。

次のコードを使用して、各要素 ID を取得します。

drop: function(ev, ui) {
            revert: true;
            var this_id = $(ui.draggable).attr("id");
            $(this).append('<div id="'+this_id+'">Some content</div>');
            $("#dropEl").sortable();
        }
于 2008-11-15T02:53:02.203 に答える