在Javascript數組中保存並顯示已刪除的元素

將某些元素放入一個框並單擊提交按鈕後，我試圖將它們保存到數組中，並將它們顯示在頁面上的另一段中。在Javascript數組中保存並顯示已刪除的元素

我寫這段代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example of HTML5 Drag and Drop</title> 
    <script type="text/javascript"> 
    function dragStart(e){ 
     e.dataTransfer.effectAllowed = "move"; 
     e.dataTransfer.setData("Text", e.target.getAttribute("id")); 
    } 
    function dragOver(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
    function drop(e){ 
     e.stopPropagation(); 
     e.preventDefault(); 
     var data = e.dataTransfer.getData("Text"); 
     e.target.appendChild(document.getElementById(data)); 

     //when i dropped an element and if i made mistake, by clicking on element i remove it from dropbox 
     var txt1 = document.getElementById(data); 
     txt1.onclick = function() { 
     document.getElementById(data).remove(); 
     this.remove();};   
    } 
    </script> 

    <style type="text/css"> 
    #dropBox{ 
     width:150px; 
     height:auto; 
     border: 1px solid gray; 
     background: lightyellow; 
     text-align: left; 
     margin: 20px 0; 
     color: orange; 
    } 
    #dropBox{ 
     margin: 10px; 
    } 
    </style> 
</head> 

<body > 
    <h2>Drag & Drop Demo</h2> 
    <p>Drag and drop the image into the drop box:</p> 
    <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);" 
    </div> 

    <!--for some reason when i drop element in dropbox, it doesn't go in new line, so i wrote this <br>. If you have better solution, please tell me.--> 
    <label id="dragA" draggable="true" ondragstart="dragStart(event);">Marko  
    Maric<br></label> 
    <label id="dragB" draggable="true" ondragstart="dragStart(event);">Ana 
    Ladic<br></label> 
    <label id="dragC" draggable="true" ondragstart="dragStart(event);">Ivan Saric<br></label> 

    <input type='button' onclick='saveAndDisplay()' value='Submit'/> 

    <!--by clicking on submit button, I want the names i picked to display in this paragraph--> 

    <p id="demo">"Names are":</p> 

    </body> 
</html>

我試圖元素保存到陣列，但是當我想顯示他們，我得到這個：[對象HTMLLabelElement。

來源

2015-10-25 user2923389

我注意到'＃dropBox'元素在開始標記中缺少關閉'>'括號。這是你遇到的問題嗎？標籤應該像這樣讀取，如果沒有：'

' – Quantastical

你有幾個問題。首先，作爲Quantastical pointed out，您尚未關閉div#dropBox標記。

當你這樣做，它會消失，因爲它不再包含任何孩子，你已經設置height: auto。我們設置height: 200px，以便它保持打開狀態。

現在拖放應該可以工作，但是您的提交按鈕調用saveAndDisplay，您還沒有爲我們定義。我懷疑在您的測試中，您無意中將您的label s轉換爲字符串，這將導致[object HTMLLabelElement]。所有你想要做的是每個從#dropBox移動到新的#demo的父親，這是simple：

function saveAndDisplay() { 
    var result = document.getElementById('demo'); 
    var list = document.getElementById('dropBox'); 
    while (list.children.length > 0) { 
     result.appendChild(list.children[0]); 
    } 
}

這裏有一個working demo，如果你想閒逛。

如果你不想實際移動的元素，只是在一段顯示出來，你也可以遍歷他們並建立段落的HTML：

function saveAndDisplay() { 
    var list = document.getElementById('dropBox').children; 
    var result = "Names are: <br />"; 
    for (var i = 0; i < list.length; i++) { 
     result += list[i].innerText + "<br />"; 
    } 
    document.getElementById('demo').innerHTML = result; 
}

下面是該版本的demo。

來源

2015-10-29 16:41:32

在Javascript數組中保存並顯示已刪除的元素

回答

相關問題