javascript創建的HTML5拖放元素：

Question

當我嘗試拖放通常由html創建的元素時，一切正常，但是當我嘗試拖放由javascript生成的元素時，返回此錯誤：

Uncaught TypeError: Cannot read property 'parentNode' of null 

我的代碼： JS用於拖放：

<div id="screen"> 
    <div id="menu_items" ondrop="drag(event)" ondragover="allowDrop(event)"></div> 
    <div id="items1" ondrop="drag(event)" ondragover="allowDrop(event)"></div></div> 
<div id="options"> 
    <div class="menu_items1"> 
     <div id="m_div_img10" class="img0" draggable="true" ondragstart="drag(event)">     <img src="./images/example.jpg" alt="example.jpg"> 
      <span class="tooltip"><img src="./images/tip.png"></span></div><div id="m_div_img21" class="img1" draggable="true" ondragstart="drag(event)"> 
      <img src="./images/example.jpg" alt="example.jpg"> 
       <span class="tooltip"> 
      <img src="./images/tip.png"> 
     </span> 
    </div> 
    </div> 
    <div class="items1"></div> 
</div> 

：由JavaScript生成

var id1; 
var name; 
function drag(ev) { 
    name = document.getElementById(ev.target.id).parentNode.id; 
    ev.dataTransfer.setData("text", name); 
    id1 = document.getElementById(name).parentNode.id; 
} 
function drop(ev) { 
    var id2 = ev.target.id; 
    if(id1 === id2 + '1'){ 
     ev.preventDefault(); 
     var data = ev.dataTransfer.getData("text"); 
     ev.target.appendChild(document.getElementById(data)); 
     //Add info to arrays 
     holders["\"" + id2 + "\": ["].push("{\"place_holder\":\"" + id2 + "\", \"name\":\"" + name + "\"}", ", "); 
    } 
} 

function allowDrop(ev) { 
    ev.preventDefault(); 
} 

HTML示例的生成HTML的方式

例子：

var items = document.createElement('div'); 
items.id = "options"; 
document.getElementsByTagName('body')[0].appendChild(items); 
var innerDivElem = document.createElement('div'); 
. 
. 
. 
innerDivElem.id = obj[i][t].name + t; 
innerDivElem.className = "img" + t; 
innerDivElem.draggable='true'; 
innerDivElem.setAttribute('ondragstart', 'drag(event)'); 
inContainerDiv.appendChild(innerDivElem); 

Answer 1

我加入這裏面的fuctions固定它，而不是通過ev.target.id歌廳ID我被this.id得到它：

innerDivElement.addEventListener("dragstart" , function(e){ 
    drag(e); 
}); 

，併成爲：

innerDivElem.addEventListener("dragstart" , function drag(ev){ 
    name = document.getElementById(this.id).id; 
    ev.dataTransfer.setData("text", name); 
    id1 = document.getElementById(name).parentNode.id; 
}); 

Answer 2

此：

innerDivElem.setAttribute('ondragstart', 'drag(event)'); 

給你這樣的：

<div ondragstart="drag(event)"></div> 

這可能會發送一個未定義event變量來drag()功能。

既然您已經在使用JavaScript，請使用JavaScript方式指定事件。

innerDivElement.ondragstart = function(e){ 
    drag(e); 
} 

甚至更​​好：

innerDivElement.addEventListener("dragstart" , function(e){ 
    drag(e); 
}); 

乍一看，這可能是你的問題，希望它有助於:)