Question

我的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脚本来创建Draggable和Droppable字段。

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

    }
});

}

页面加载后，所有Draggable和Droppable功能都正常工作。我的页面中有一个单独的按钮，可以动态添加LI元素。当我添加新元素时，我再次调用上面的Java脚本方法来使新添加的项目可拖动。但实际上发生的事情是新添加的LI工作正常，可拖动和可放置，并且所有现有的LI都不再可以丢弃。

Answer 1

我一直在使用以下方法将'LI'元素添加到levelBuckets。

 consultantContainer.innerHTML += consultantWrapper;

但是在我按照下面提到的方式修改了上面一行之后，我的问题就解决了。我认为问题是使用innerHTML来追加元素，它会影响可拖动的功能。

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

编辑：以下是澄清appendTo使用的更明确的示例。

$('<div class="arbitraryClass">arbitraryContent</div>').appendTo('#' + arbitraryID);

当我向droppable区域动态添加新元素时，所有现有元素都不可删除

1 个答案: