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); 
}); 

乍一看，这可能是你的问题，希望它有助于:)