Question

document.getElementById('canvas_map').addEventListener(
    'dragstart', function(event) {
    var list_exe_selected=[];
    var image_match=[];
    //[...] code to find images image_match will be an htmlcollection
    list_exe_selected[i]=[];
    for (var j=0; j<image_match.length; j++) {
        var str=image_match[j].href.baseVal;
        list_exe_selected[i].push(str);
    };
    event.dataTransfer.setData('text', list_exe_selected);
}
document.getElementById('canvas_map').addEventListener(
    'dragover', function(event) {
    event.preventDefault();
});
document.getElementById('canvas_map').addEventListener(
    'drop', function(event) {
    var data = event.dataTransfer.getData('text');
    var list_exe_selected=data.split(',');
    for (var i=1; i<list_exe_selected.length; i++) {
        exe_selected=list_exe_selected[i];
        //do stuff
    };
};

第一件事：在dataTransfer.setData text中是数据类型......好。还有哪种其他数据类型???我找不到。数组有什么东西吗？

第二件事：我list_exe_selected dragstart就像这样：

[ <1 empty space>, "my_string1", Array[2], <3 empty spaces>, "my_string2"… ]

但我data上的drop就是这样：

,my_string,first_element_of_my_array,second_element_of_my_array,,,,my_string2...

我的数组在他的元素中已“爆炸”，所以我的list_exe_selected没有像以前一样的索引，这就是问题......

有没有简单的方法来解决这个问题？我可以手动重建阵列，但也许可以在不丢失格式的情况下传输数据，或者可以传递多组数据......

编辑：我可能错了，但最后看起来你不能直接传递数组。

Answer 1

我不熟悉event.dataTransfer，但看起来好像你传递了文字，你需要在数组上使用JSON.stringify和JSON.parse。我修改了你的代码以包含这些代码。

document.getElementById('canvas_map').addEventListener(
    'dragstart', function(event) {
    var list_exe_selected=[];
    var image_match=[];
    //[...] code to find images image_match will be an htmlcollection
    list_exe_selected[i]=[];
    for (var j=0; j<image_match.length; j++) {
        var str=image_match[j].href.baseVal;
        list_exe_selected[i].push(str);
    };

    // Turns the array into a JSON string
    list_exe_selected = JSON.stringify(list_exe_selected);

    // saves the array as 'text' or a string
    event.dataTransfer.setData('text', list_exe_selected);
}
document.getElementById('canvas_map').addEventListener(
    'dragover', function(event) {
    event.preventDefault();
});
document.getElementById('canvas_map').addEventListener(
    'drop', function(event) {
    // gets the array as a string or 'text'
    var data = event.dataTransfer.getData('text');

    // formats the saved string into an array
    data = JSON.parse(data);
    var list_exe_selected=data.split(',');
    for (var i=1; i<list_exe_selected.length; i++) {
        exe_selected=list_exe_selected[i];
        //do stuff
    };
};

JSON.stringify()和JSON.parse()的文档。

您可能还想查看dataTransfer的MDN页面。

如何拖放数组

1 个答案: