2

この機能を動作させるのに問題があります。

状況は次のとおりです。

  1. ユーザーが項目を div にドラッグします
  2. ドロップ時に、アイテム ID を持つコントローラー アクションに AJAX Post が送信されます。
  3. 成功したら、アイテムがドロップされた div を、データベースから取得した html マークアップに置き換えます。.replaceWith(data) 注: このマークアップは、項目がドロップされた ID と同じ ID を持つ div であり、いくつかの追加要素が含まれています。
  4. これにより、更新された div が読み込まれます。

これはすべて完全に機能しますが、問題は、別のアイテムをdivにドラッグできないことです。AJAX Postの後にロードされる新しいdiv（同じIDを持つ）と関係があると確信しています。

これが私のjQueryコードです

$(function () {
        $('.draggable').draggable({ revert: true });
        $('#layoutHeader').droppable({
            drop: function (event, ui) {
                $.ajax({
                    type: "POST",
                    url: '/SiteSetup/GetMarkup/' + $(ui.draggable).attr("id"),
                    success: function (data) {
                        $('.draggable').draggable('destroy');
                        $('#layoutHeader').replaceWith(data);
                        $('.draggable').draggable({ revert: true });

                    }
                });
            }
        });
    });
4

2 に答える 2

3

jQuery と DOM では、DOM 要素をまったく同じ DOM id を持つまったく同じ DOM 要素に置き換えると (したがって、id "div1" を持つ div は、id "div1" を持つ別の div に置き換えられます)、それに関連付けられた jQuery データは、 DOM 要素が失われます。jQuery のポインターは、実際にはページに存在しなくなったゴースト要素を指しています。

証明を見るには、Firefox で firebug を起動して、単純に行ってください。

$("#layoutHeader")

AJAX投稿の前後。コンソールに返された要素を両方の時間クリックします。2 回目のクリック (つまり、POST が返された後の 1 回) で、firebug がグレー表示されたゴースト要素を指すことに気付くでしょう。

解決策は、コードを少しリファクタリングすることです。これを試して

function handler(event,ui){
                $.ajax({
                    type: "POST",
                    url: '/SiteSetup/GetMarkup/' + $(ui.draggable).attr("id"),
                    success: function (data) {
                        $('.draggable').draggable('destroy');
                        $('#layoutHeader').replaceWith(data);
                        $('.draggable').draggable({ revert: true });

                    }
             $('#layoutHeader').droppable({drop: handler});
}


$(function () {
        $('.draggable').draggable({ revert: true });
        $('#layoutHeader').droppable({drop: handler});

    });
于 2011-03-15T15:22:04.010 に答える
1

idDOM に挿入する HTML を保持しても、置換する に接続されていたウィジェットは保持されませんdroppable。div

droppable新しいコンテンツでウィジェットが再初期化されるように、コードを再構築する必要があります。

$('.draggable').draggable({ revert: true });

function createDroppable() {
    $('#layoutHeader').droppable({
        drop: function (event, ui) {
            $.ajax({
                type: "POST",
                url: '/SiteSetup/GetMarkup/' + $(ui.draggable).attr("id"),
                success: function (data) {
                    $('.draggable').draggable('destroy');
                    $('#layoutHeader').replaceWith(data);

                    /* Re-initialize the droppable widget: */
                    createDroppable();

                    $('.draggable').draggable({ revert: true });
                }
            });
        }
    });
}   

createDroppable();

または、として機能する#layoutHeader別のものでラップすることもできます。そうすれば、置き換えによって機能が削除されることはありません。divdroppable#layoutHeaderdroppable

于 2011-03-15T15:19:55.363 に答える