JS Drag and drop with DOM

Question

With this tutorial i made simple drag and drop web app. But I cant do it with DOM. Here is my code jsfinddle . It is not working on jsfiddle but if u download it it will. The script should be placed behind the divs. When you uncoment <div class="column" draggable="true"><span>A</span></div> it will work (not in jsfiddle). So how can i made it with DOM ?

Answer 1

Going off the assumption you meant doing the draggable with dynamically created elements, I've updated your jsfiddle. http://jsfiddle.net/7c3v0s1s/6/ I wrapped the code in a namespace while doing the 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();