获取Uncaught HierarchyRequestError：无法执行＆＃39; appendChild＆＃39; on＆＃39;节点＆＃39;：新的子元素包含父元素。在HTML5中拖放下降

Question

我是HTML5的新手，我正在尝试实现拖放功能。掉落它的特征     我有两列，想要拖放＆amp;中的内容这些列。这两个是静态列

    <span class="columnWidth" id="toDo">
          <div class ="columnHeader">To Do</div>
          <div class ="columnContent" 
               ondragenter ="return  dragDrop.dragEnter(event)" 
               ondrop="return dragDrop.drop(event)"
               ondragover="dragDrop.dropOver(event)"></div>
      </span>

      <span class="columnWidth">
            <div class ="columnHeader">Progress</div>
            <div class ="columnContent" 
                 ondragenter ="dragDrop.dragEnter(event)"
                 ondrop="dragDrop.drop(event)"
                 ondragover="dragDrop.dropOver(event)"></div>
       </span>

可拖动元素使用javascript动态创建，如下所示

document.getElementById("toDo").getElementsByClassName('columnContent')  [0].appendChild(taskDefination);
taskDefination.addEventListener('dragstart', dragDrop.dragStart, false);
taskDefination.addEventListener('dragend', dragDrop.dragEnd, false);

我包括拖拽和放大器将javascript代码放在单独的javascript文件中。

var dragDrop = (function(){
    var _createDropZone = function(){

        }

    var _dragStart =function(event){
        console.log("Method Executing:dragDrop.dragStart");
        event.target.id="currentElement";
        var x=event.dataTransfer.setData('text/html',event.target.id);

    }   

    var _dragEnd = function(event){
        console.log("Method Executing:dragDrop.dragEnd")

        }   

    var _dragEnter = function(){
        console.log("Dragged dropped");
        event.preventDefault();
   return true;

        }

    var _drop=function(event){
        console.log("Method Executing :dragDrop.drop")
        event.preventDefault();
        }       

    var _dropOver = function(event){
        console.log("Method Executing:dragDrop.dropOver");
        event.preventDefault();
        console.log(event.target);
        event.target.appendChild(document.getElementById(event.dataTransfer.getData('text/html')));
        y.id="";

        }   
    return{
        createDropZone:_createDropZone,
        dragStart:_dragStart,
        dragEnter:_dragEnter,
        dragEnd:_dragEnd,
        drop:_drop,
        dropOver:_dropOver
        }


    })()

虽然拖累了drop正在运行，但我可以在控制台中看到的错误。 其次，console.log假设给目标放置的目标，而不是显示可拖动的元素。我也明白我试图追加一个字符串，但appendChild会追加一个节点。我指的是http://www.sitepoint.com/a-drag-and-drop-planning-board-with-html5/。

拖动beign之前可拖动元素的快照是

拖动后

解决这个问题的任何帮助都会非常明显。谢谢！