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

    }
});

}

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

4

1 回答 1

0

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

 consultantContainer.innerHTML += consultantWrapper;

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

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

编辑：这是一个更明确的示例来阐明appendTo的使用。

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