我正在javascript中执行drap和swap。当拖动的元素放置在其他可拖动元素的顶部时,我想突出显示。为此,我使用了dragEnter和dragLeave事件。但是这些事件没有按预期工作。这里我附加了示例的stakblitz链接。有人能帮助我解决这个问题吗?我想让一个元素在被拖动到它上面时处于高亮显示状态。
在上面的例子中,我可以将A拖到其他位置(可以是B、C或D)。当我拖动A并移动到C(B或D)时,意味着C(B或D)应该突出显示。
hrysbysz1#
在此处将this替换为lastEle:
this
lastEle
function handleDragEnter(e) { //lastEle ? this.classList.remove('over'): ''; lastEle ? lastEle.classList.remove('over'): ''; this.classList.add('over'); lastEle = this; }
fae0ux8s2#
document.addEventListener('DOMContentLoaded', (event) => { var dragSrcEl = null; let lastElem; function handleDragStart(e) { this.style.opacity = '0.4'; dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = 'move'; return false; } function handleDragEnter(e) { lastElem ? lastElem.classList.remove('over') : ''; this.classList.add('over'); lastElem = this; } function handleDragLeave(e) { // this.classList.remove('over'); } function handleDrop(e) { if (e.stopPropagation) { e.stopPropagation(); // stops the browser from redirecting. } if (dragSrcEl != this) { dragSrcEl.innerHTML = this.innerHTML; this.innerHTML = e.dataTransfer.getData('text/html'); } return false; } function handleDragEnd(e) { this.style.opacity = '1'; items.forEach(function (item) { item.classList.remove('over'); }); } let items = document.querySelectorAll('.container .box'); items.forEach(function (item) { item.addEventListener('dragstart', handleDragStart, false); item.addEventListener('dragenter', handleDragEnter, false); item.addEventListener('dragover', handleDragOver, false); item.addEventListener('dragleave', handleDragLeave, false); item.addEventListener('drop', handleDrop, false); item.addEventListener('dragend', handleDragEnd, false); }); });
试试这个变化。它会工作。
2条答案
按热度按时间hrysbysz1#
在此处将
this
替换为lastEle
:fae0ux8s2#
试试这个变化。它会工作。