jquery - 使用 jQuery load() 保留外部 HTML 文件的加载部分

Question

我拥有的是 1 个可放置的 div (dropZone) 和几个可拖动的。可拖动对象是 HTML 代码片段，当拖放到 dropZone 中时，会在其中呈现 html 代码。（HTML 代码存储在带有 ID 的外部 html 文件中）发生的情况是，当我放下一个可拖动的文件时，它工作正常。但如果我放弃另一个，它会清除当前代码。关于如何做到这一点的任何建议？

$("#dropZone").droppable({
    tolerance: 'touch',
    over: function() {
        $('.dragMe').addClass('red');
    },
    out: function() {
        $('.dragMe').removeClass('red');
    },
    drop: function(event, ui) {
        var id = ui.draggable.attr("id");
        $(this).load('test.html #' + id);
    }
});

有没有办法将当前代码保留在 dropZone 中，所以当我将另一个可拖动的内容放入其中时，它会添加到代码中？

非常感谢你。

Answer 1

你可以使用这个：

jQuery.get('http://localhost/test.html', function(data) 
{ 
    alert(data); 
}); 

这将获取数据，然后您可以将数据分配给变量以供以后使用。如果您有多个负载，则只需创建一个包含所有数据的数组，每次加载时将其添加到数组中。

编辑：（在你的情况下）

drop: function(event, ui) 
{
    var id = ui.draggable.attr("id");
    jQuery.get('http://localhost/test.html#' + id, function(data) 
    { 
        //store data as variable
        $(this).html(data);
    }); 
}