JS 拖放 DOM

Question

和this tutorial i made simple drag and drop web app. But I cant do it with DOM. Here is my code jsfinddle。它不适用于 jsfiddle，但如果你下载它，它就会。脚本应该放在 div 后面。当您取消注释 <div class="column" draggable="true"><span>A</span></div> 时，它将起作用（不在 jsfiddle 中）。那么我怎样才能用 DOM 做到呢？

Answer 1

假设您的意思是使用动态创建的元素进行可拖动，我已经更新了您的 jsfiddle。 http://jsfiddle.net/7c3v0s1s/6/ 我在进行更改时将代码包装在命名空间中。

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

JS 拖放 DOM

JS Drag and drop with DOM

html

javascript

css

dom

drag-and-drop