的Javascript:handleDragLeave和handleDragEnd没有结束元素
问题描述:
拖就消除类的效果我有一个随意拖动和https://jsfiddle.net/64y1280t/下降排序表行的例子。 如果您将一个项目,例如从“F”拖动到“A”,那么您仍然会在“A”上看到黄色背景效果。但是,我已经handleDragLeave和handleDragEnd处理程序已经删除这些影响。的Javascript: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);
});
答
这将解决这个问题。
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;
}