Javascript：handleDragLeave 和 handleDragEnd 不删除拖动元素的类效果答案

【问题标题】：Javascript: handleDragLeave and handleDragEnd not removing class effect on drag over elementJavascript：handleDragLeave 和 handleDragEnd 不删除拖动元素的类效果
【发布时间】：2016-09-14 19:00:27
【问题描述】：

我在https://jsfiddle.net/64y1280t/ 有一个拖放排序表行示例。如果您将一个项目，例如从“F”拖到“A”，那么您仍然会在“A”上看到黄色背景效果。但是，我已经有 handleDragLeave 和 handleDragEnd 处理程序来删除这些效果。

HTML

<table id="columns">

    <tr id="a" class="column a" draggable="true">
            <td>A</td>
    </tr>

    <tr id="b" class="column b" draggable="true">
            <td>B</td>
    </tr>

    <tr id="c" class="column c" draggable="true">
            <td>C</td>
    </tr>

    <tr id="d" class="column d" draggable="true">
            <td>D</td>
    </tr>

    <tr id="e" class="column e" draggable="true">
            <td>E</td>
    </tr>

    <tr id="f" class="column f" draggable="true">
            <td>F</td>
    </tr>
</table>

CSS

table{
            width: 100%;
        }
tr{
  padding: 10px;
  background-color: #eee;
  width: 100%;
}
.column {
  cursor: move;
}

.column.over {
  background-color: yellow;
}

.sort_error{
  background-color: red;
}

JavaScript

        var dragSrcEl = null;
        var cols = [];

        function handleDragStart(e) {
            dragSrcEl = this;
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/html', this.outerHTML);
        }

        function handleDragEnd(e) {
            [].forEach.call(cols, function (col) {
                col.classList.remove('over');
            });
        }

        function handleDragEnter(e) {
            this.classList.add('over');
        }

        function handleDragLeave(e) {
            this.classList.remove('over');
        }

        function handleDragOver(e) {
            if (e.preventDefault) {
                e.preventDefault();
            }

            e.dataTransfer.dropEffect = 'move';
            return false;
        }

        function handleDrop(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            dragSrcEl.outerHTML = this.outerHTML;
            this.outerHTML = e.dataTransfer.getData('text/html');
            return false;
        }

        cols = document.querySelectorAll('#columns .column');
        [].forEach.call(cols, function(col) {
            col.addEventListener('dragstart', handleDragStart, false);
            col.addEventListener('dragenter', handleDragEnter, false)
            col.addEventListener('dragover', handleDragOver, false);
            col.addEventListener('dragleave', handleDragLeave, false);
            col.addEventListener('drop', handleDrop, false);
            col.addEventListener('dragend', handleDragEnd, false);
        });

【问题讨论】：

标签： javascript drag-and-drop drag

【解决方案1】：

这将解决问题。

function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
  }

  var dragSrcElHtml = dragSrcEl.outerHTML; 
  this.classList.remove("over");
  dragSrcEl.outerHTML = this.outerHTML;
  this.outerHTML = dragSrcElHtml;
  return false;
}

【讨论】：