使用 jQuery 拖放后的 DOM 修改答案

【问题标题】：DOM modification after drag and drop using jQuery使用 jQuery 拖放后的 DOM 修改
【发布时间】：2012-07-26 20:52:59
【问题描述】：

我是 jQuery 新手。我已经实现了一个拖放场景。我的问题是 jQuery 是否会在成功执行拖放操作后自动修改内部 DOM。

这是我的场景。最初我的可放置元素#droppableContainer 是空的。但是在我将一些元素放入其中之后，可放置的元素仍然是空的！！！

以下是我编写的一些测试代码，用于遍历我的 droppable 的所有子元素：

$('#droppableContainer').children().each(function(item) {
        alert($(this).attr('id'));

});

上面的测试代码在所有可拖放事件之后单独执行，但没有打印任何内容。

提前致谢！！！

【问题讨论】：

如何确保您发布的迭代可放置子项的代码仅在所有拖放操作完成执行后运行？

标签： jquery jquery-ui drag-and-drop draggable jquery-ui-draggable

【解决方案1】：

您应该在可放置元素的drop 事件中访问可放置容器：

$(function() {
    $( "#droppableContainer" ).droppable({
        drop: function( event, ui ) {
            console.log($(this)); // $(this) being the #droppableContainer
        }
    });
});

【讨论】：