javascript - JS Drag and drop with DOM -

with this tutorial made simple drag , drop web app. cant dom. here code jsfinddle . not working on jsfiddle if u download it will. script should placed behind divs. when uncoment <div class="column" draggable="true"><span>a</span></div> work (not in jsfiddle). how can made dom ?

going off assumption meant doing draggable dynamically created elements, i've updated jsfiddle. http://jsfiddle.net/7c3v0s1s/6/ wrapped code in namespace while doing changes.

html

<div class="containter">     <div id="columns"></div> </div> 

javascript

var localnamespace = {     dragsrcel: null     , binddraggables: function() {         var cols = document.queryselectorall('#columns .column');          [].foreach.call(cols, function(col) {             col.addeventlistener('dragstart', localnamespace.handledragstart, false);             col.addeventlistener('dragenter', localnamespace.handledragenter, false);             col.addeventlistener('dragover', localnamespace.handledragover, false);             col.addeventlistener('dragleave', localnamespace.handledragleave, false);             col.addeventlistener('drop', localnamespace.handledrop, false);             col.addeventlistener('dragend', localnamespace.handledragend, false);         });     }     , createdraggables: function() {         var coldiv = document.getelementbyid('columns');         var divc = document.createelement('div');         var spanc = document.createelement('span');          divc.classname = 'column';         divc.draggable = 'true';         spanc.innerhtml = 'a';          divc.appendchild(spanc);         coldiv.appendchild(divc);     }     , handledrop: function(e) {         if(e.stoppropagation){             e.stoppropagation();         }          if(dragsrcel != this){             localnamespace.dragsrcel.innerhtml = this.innerhtml;             this.innerhtml = e.datatransfer.getdata('text/html');         }         return false;     }     , handledragend: function(e) {         var cols = document.queryselectorall('#columns .column');         this.style.opacity = 1;          [].foreach.call(cols, function(col){             col.classlist.remove('over');         });      }            , handledragenter: function(e) {         this.classlist.add('over');     }     , handledragleave: function(e) {         this.classlist.remove('over');     }     , handledragover: function(e) {         if(e.preventdefault){             e.preventdefault();         }          e.datatransfer.dropeffect = 'move';         return false;     }     , handledragstart: function(e) {         this.style.opacity = 0.4;         localnamespace.dragsrcel = this;         e.datatransfer.effectallowed = 'move';         e.datatransfer.setdata('text/html', this.innerhtml);     }     , init: function() {         var readystatecheckinterval = setinterval(function() {             if (document.readystate === "complete") {                 clearinterval(readystatecheckinterval);                 localnamespace.createdraggables();                 localnamespace.binddraggables();             }         }, 10);     } };  localnamespace.init();