HTML 5拖放未删除

Question

I've got 3 divs and I want them to switch positions when I drop one of them on another. Everything is OK except the switching. When I drop a div, it goes back to its default place.

My HTML & js code:

<div class="drop" draggable="true" style="background-color: blue;"></div>
<div class="drop" draggable="true" style="background-color: red;"></div>
<div class="drop" draggable="true" style="background-color: green;"></div>


<script>
    var draggedData = null;

    /* start dragging an item */
    function dragStart(ev) {
        this.style.opacity = '0.4';

        draggedData = this;

        ev.dataTransfer.effectAllowed = 'move';
        ev.dataTransfer.setData('text/html', this.innerHTML);
    }

    /* item is moved over the div */
    function dragOver(ev) {
        if (ev.preventDefault)
            ev.preventDefault();    // allows to drop an item

        ev.dataTransfer.dropEffect = 'move';    // item is moved to a new location

        return false;
    }

    /* item enters the div */
    function dragEnter(ev) {
        this.classList.add('dragover');
    }

    /* item leaves the div */
    function dragLeave(ev) {
        this.classList.remove('dragover');
    }

    /* item is dropped on a div */
    function dragDrop(ev) {
        if (ev.stopPropagation)
            ev.stopPropagation();   // stops the browser redirecting

        if(draggedData != this) {
            draggedData.innerHTML = this.innerHTML;
            this.innerHTML = ev.dataTransfer.getData('text/html');
        }

        return false;
    }

    /* after finishing the move (successful or unsuccessful) */
    function dragEnd(ev) {
        [].forEach.call(cols, function (col) {
            col.classList.remove('dragover');
        });
        this.style.opacity = '1';
    }


    var cols = document.querySelectorAll('.drop');
    [].forEach.call(cols, function(col) {
        col.addEventListener('dragstart', dragStart, false);
        col.addEventListener('dragenter', dragEnter, false);
        col.addEventListener('dragover', dragOver, false);
        col.addEventListener('dragleave', dragLeave, false);
        col.addEventListener('drop', dragDrop, false);
        col.addEventListener('dragend', dragEnd, false);
    });
</script>

and my css:

    .drop {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    background-color: red;
    margin: 10px;
}

.dragover {
    border: 2px dashed black;
}

Answer 1

Try this HTML instead. ;)

<div class="drop" draggable="true" style="background-color: blue;">blue</div>
<div class="drop" draggable="true" style="background-color: red;">red</div>
<div class="drop" draggable="true" style="background-color: green;">green</div>

I think the problem is you aren't changing inline CSS.