如何拖放陣列

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.setDatatext是數據類型...好。還有哪些其他數據類型？我找不到。有數組的東西嗎？

第二件事：我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頁面。