我正在通过参考此链接对HTML5拖放概念进行研究工作。目前,我在dragleave
之前第二次触发(对于子元素(的事件dragenter
遇到了问题。因此,在某些情况下,我在dragenter
时给出的虚线边框样式在dragleave
后不会删除。当我在谷歌中搜索时,我引用了一些链接和这个链接,但仍然无法解决问题。我添加了CSS属性pointer-events: none
但这在IE9和IE10中不兼容。
请注意,我需要IE9及更高版本的兼容性,Mozilla也是如此。
PFB 代码片段。
var dragSrcEl = null;
var dragEnteredSrcEl = null;
var collection = $();
function handleDragStart(ev) {
dragSrcEl = ev.target;
ev.target.style.opacity = 0.4;
ev.target.classList.add('moving');
ev.dataTransfer.setData('text/html', ev.target.innerHTML);
}
function handleDragOver(ev) {
ev.preventDefault();
}
function handleDragEnter(ev, el) {
ev.stopPropagation();
console.log('drag enter!');
var dragEnteringElement = ev.target;
collection = collection.add(dragEnteringElement);
// dragEnteredSrcEl = dragEnteringElement;
el.classList.add('over');
}
function handleDrop(ev, el) {
// console.log(ev.target);
var droppingElement = el;
// Don't do anything if dropping the same column we're dragging.
if (dragSrcEl != ev.target) {
// Set the source column's HTML to the HTML of the column we dropped on.
dragSrcEl.style.opacity = 1;
dragSrcEl.innerHTML = droppingElement.innerHTML;
droppingElement.classList.remove('over');
droppingElement.innerHTML = ev.dataTransfer.getData('text/html');
}
}
function handleDragLeave(ev, el) {
// console.log(ev.target);
setTimeout(function() {
var dragLeavingElement = ev.target;
console.log(collection.length);
collection = collection.not(dragLeavingElement);
if (collection.length === 0) {
console.log('drag leave!');
el.classList.remove('over');
}
}, 1);
}
function handleDragEnd(ev) {
ev.target.style.opacity = 1;
ev.target.classList.remove('moving');
ev.target.classList.remove('over');
}
function handleContentClick(content) {
alert(content);
}
.clearfix {
clear: both;
}
[draggable] {
cursor: move;
}
.col-md-4 {
width: 150px;
height: 150px;
border: 2px solid orange;
float: left;
margin-top: 5px;
margin-right: 5px;
text-align: center;
}
.col-md-4.over {
border-style: dashed;
}
/* .col-md-4 h2 {
pointer-events: none;
} */
<div class="container">
<div class="col-md-4" draggable="true" ondragstart="handleDragStart(event)" ondrop="handleDrop(event, this)" ondragenter="handleDragEnter(event, this)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event, this)" ondragend="handleDragEnd(event)">
<h2 onclick="handleContentClick('Hello!')">Hello!</h2>
</div>
<div class="col-md-4" draggable="true" ondragstart="handleDragStart(event)" ondrop="handleDrop(event, this)" ondragenter="handleDragEnter(event, this)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event, this)" ondragend="handleDragEnd(event)">
<h2 onclick="handleContentClick('Welcome!')">Welcome!</h2>
</div>
<div class="col-md-4" draggable="true" ondragstart="handleDragStart(event)" ondrop="handleDrop(event, this)" ondragenter="handleDragEnter(event, this)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event, this)" ondragend="handleDragEnd(event)">
<h2 onclick="handleContentClick('World!')">World!</h2>
</div>
<div class="clearfix"></div>
<div class="col-md-4" draggable="true" ondragstart="handleDragStart(event)" ondrop="handleDrop(event, this)" ondragenter="handleDragEnter(event, this)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event, this)" ondragend="handleDragEnd(event)">
<h2 onclick="handleContentClick('Big Hello!')">Big Hello!</h2>
</div>
<div class="col-md-4" draggable="true" ondragstart="handleDragStart(event)" ondrop="handleDrop(event, this)" ondragenter="handleDragEnter(event, this)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event, this)" ondragend="handleDragEnd(event)">
<h2 onclick="handleContentClick('Big Welcome!')">Big Welcome!</h2>
</div>
<div class="col-md-4" draggable="true" ondragstart="handleDragStart(event)" ondrop="handleDrop(event, this)" ondragenter="handleDragEnter(event, this)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event, this)" ondragend="handleDragEnd(event)">
<h2 onclick="handleContentClick('Big World!')">Big World!</h2>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
提前谢谢。
您应该使用event.stopPropagation();
谁阻止事件与子元素一起触发。
有文档:https://api.jquery.com/event.stoppropagation/
它是一个Firefox-bug。在Firefox中,"Dragenter-Event"被触发两次。无论是否有任何子元素。您可以尝试将 event.target 和 event.currentTarget 与 pointer-events: none 结合使用。