0

私は次のように私のhtmlコンテナを持っています、そしてそれはいくつかのレベルを持っています。

    <div id='levels'>
    <div id="level6" class="container">
    <div class="content">
      <ul id="6" class="levelBucket">
      </ul>
    </div>
    </div>
    <div id="level5" class="container">
        <div class="content">
            <ul id="5" class="levelBucket">
            </ul>
        </div>
    </div>
    </div>

ページが読み込まれると、DBから必要な要素をフェッチし、以下のHTMLを使用して関連するULに追加します。

   <li class='dataWrapper' >
   <div>content..</div>
   </li>

すべてのLI要素が配置されたら、次のJavaスクリプトを使用して、フィールドをドラッグ可能およびドロップ可能にします。

function AddDraggableDropperbleFunctionality() {

var selectedClass = 'areaSelected';

$('.levelBucket li').draggable({
    revert: true,
    start: function (e, ui) {
        ui.helper.addClass(selectedClass);
    },
    stop: function (e, ui) {},
    drag: function (e, ui) {}
});


  $(".levelBucket").sortable().droppable({
    over: function (e, ui) { $(this).addClass(selectedClass); },
    out: function (e, ui) { $(this).removeClass(selectedClass); },
    drop: function (e, ui) {

       //Do all the updates

    }
});

}

ページが読み込まれた後、すべてのドラッグ可能およびドロップ可能機能は正常に機能しています。私のページには、LI要素を動的に追加するための別のボタンがあります。新しい要素を追加するときは、上記のJavaスクリプトメソッドを再度呼び出して、新しく追加したアイテムをドラッグ可能にします。しかし実際には、新しく追加されたLIはドラッグ可能およびドロップ可能で正常に機能しており、既存のすべてのLIはもはやドロップ可能ではありません。

4

1 に答える 1

0

次のメソッドを使用して、levelBucketsに「LI」要素を追加しています。

 consultantContainer.innerHTML += consultantWrapper;

しかし、上記の行を以下のように変更したところ、問題は解決しました。問題はinnerHTMLを使用して要素を追加することであり、ドラッグ可能な機能に影響を与えると思います。

$(consultantWrapper).appendTo('#' + level);

編集：これは、 appendToの使用を明確にするためのより明確な例です。

$('<div class="arbitraryClass">arbitraryContent</div>').appendTo('#' + arbitraryID);
于 2012-06-13T05:01:38.330 に答える