Javascript HTML5拖放而非拖放

我有3个div，当我把其中一个放到另一个div上时，我想让它们切换位置。除了开关外，一切正常。当我删除一个div时，它会回到默认位置

我的HTML和js代码：

<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>

试试这个HTML吧。；）

蓝色
红色
绿色

---

我认为问题在于你没有改变内联CSS

所以没关系，它只需要删除样式（或者在删除时更改样式）。有点尴尬，我看不到它好的，非常感谢。因此，让这个问题作为一个例子，如何做到几乎正确

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

.dragover {
    border: 2px dashed black;
}

<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>