我遇到的问题是，一个元素的dragleave事件是在悬停该元素的子元素时触发的。同样，当再次悬停回父元素时，dragenter不会被触发。
我做了一个简化的小提琴:http://jsfiddle.net/pimvdb/HU6Mk/1/。
HTML:
<div id="drag" draggable="true">drag me</div>
<hr>
<div id="drop">
drop here
<p>child</p>
parent
</div>
使用以下JavaScript:
$('#drop').bind({
dragenter: function() {
$(this).addClass('red');
},
dragleave: function() {
$(this).removeClass('red');
}
});
$('#drag').bind({
dragstart: function(e) {
e.allowedEffect = "copy";
e.setData("text/plain", "test");
}
});
它应该做的是，当拖拽一些东西时，通过将drop div设置为红色来通知用户。这是可行的，但是如果你拖动到p子元素中，拖动键就会触发，div就不再是红色了。移动回下拉div也不会使它再次变红。有必要完全移出拖放div，并再次拖回它，使其变为红色。
是否有可能阻止dragleave在拖动到子元素时发射?
2017年更新:TL;DR，查找CSS指针事件:无;如@ h.d.所述。在现代浏览器和IE11中都能运行。
这是我的解决方案(https://jsfiddle.net/42mh0fd5/8):
<div id="droppable">
<div id="overlay"></div>
<a href="">test child 1</a>
<br /><br />
<button>test child 2</button>
<br /><br />
<button>test child 3</button>
<br />
</div>
<p id="draggable" draggable="true">This element is draggable.</p>
<script type="text/javascript">
var dropElem = document.getElementById('droppable');
var overlayElem = document.getElementById('overlay');
overlayElem.addEventListener('drop', function(ev) {
ev.preventDefault();
console.log('drop', ev.dataTransfer.files)
overlayElem.classList.remove('dragover')
dropElem.classList.add('dropped')
console.log('drop')
}, false);
overlayElem.addEventListener('dragover', function(ev) {
ev.preventDefault();
}, false);
overlayElem.addEventListener('dragleave', function(ev) {
console.log('dragleave')
overlayElem.classList.remove('dragover')
}, false);
dropElem.addEventListener('dragenter', function(ev) {
console.log('dragenter')
overlayElem.classList.add('dragover')
}, false);
</script>
<style>
#draggable{
padding:5px;
background: #fec;
display: inline-block;
}
#droppable{
width: 300px;
background: #eef;
border: 1px solid #ccd;
position: relative;
text-align: center;
padding:30px;
}
#droppable.dropped{
background: #fee;
}
#overlay.dragover{
content:"";
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.2);
border:3px dashed #999;
}
</style>
这是我的解决方案(https://jsfiddle.net/42mh0fd5/8):
<div id="droppable">
<div id="overlay"></div>
<a href="">test child 1</a>
<br /><br />
<button>test child 2</button>
<br /><br />
<button>test child 3</button>
<br />
</div>
<p id="draggable" draggable="true">This element is draggable.</p>
<script type="text/javascript">
var dropElem = document.getElementById('droppable');
var overlayElem = document.getElementById('overlay');
overlayElem.addEventListener('drop', function(ev) {
ev.preventDefault();
console.log('drop', ev.dataTransfer.files)
overlayElem.classList.remove('dragover')
dropElem.classList.add('dropped')
console.log('drop')
}, false);
overlayElem.addEventListener('dragover', function(ev) {
ev.preventDefault();
}, false);
overlayElem.addEventListener('dragleave', function(ev) {
console.log('dragleave')
overlayElem.classList.remove('dragover')
}, false);
dropElem.addEventListener('dragenter', function(ev) {
console.log('dragenter')
overlayElem.classList.add('dragover')
}, false);
</script>
<style>
#draggable{
padding:5px;
background: #fec;
display: inline-block;
}
#droppable{
width: 300px;
background: #eef;
border: 1px solid #ccd;
position: relative;
text-align: center;
padding:30px;
}
#droppable.dropped{
background: #fee;
}
#overlay.dragover{
content:"";
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.2);
border:3px dashed #999;
}
</style>
我在这个问题上挣扎了很多，即使在读完所有这些答案之后，我想我可以和你分享我的解决方案，因为我认为这可能是一种更简单的方法，尽管有点不同。我的想法是简单地完全省略dragleave事件监听器，并在每个新的dragenter事件触发时编码dragleave行为，同时确保dragenter事件不会被不必要地触发。
在下面的例子中，我有一个表，我希望能够通过拖放API相互交换表行内容。在dragenter上，一个CSS类将被添加到当前拖动元素的row元素中，以突出显示它，而在dragleave上，这个类将被删除。
例子:
非常基本的HTML表格:
<table>
<tr>
<td draggable="true" class="table-cell">Hello</td>
</tr>
<tr>
<td draggable="true" clas="table-cell">There</td>
</tr>
</table>
还有dragenter事件处理函数，添加到每个表格单元格中(除了dragstart, dragover, drop和dragend处理程序，它们不是针对这个问题的，所以这里不复制):
/*##############################################################################
## Dragenter Handler ##
##############################################################################*/
// When dragging over the text node of a table cell (the text in a table cell),
// while previously being over the table cell element, the dragleave event gets
// fired, which stops the highlighting of the currently dragged cell. To avoid
// this problem and any coding around to fight it, everything has been
// programmed with the dragenter event handler only; no more dragleave needed
// For the dragenter event, e.target corresponds to the element into which the
// drag enters. This fact has been used to program the code as follows:
var previousRow = null;
function handleDragEnter(e) {
// Assure that dragenter code is only executed when entering an element (and
// for example not when entering a text node)
if (e.target.nodeType === 1) {
// Get the currently entered row
let currentRow = this.closest('tr');
// Check if the currently entered row is different from the row entered via
// the last drag
if (previousRow !== null) {
if (currentRow !== previousRow) {
// If so, remove the class responsible for highlighting it via CSS from
// it
previousRow.className = "";
}
}
// Each time an HTML element is entered, add the class responsible for
// highlighting it via CSS onto its containing row (or onto itself, if row)
currentRow.className = "ready-for-drop";
// To know which row has been the last one entered when this function will
// be called again, assign the previousRow variable of the global scope onto
// the currentRow from this function run
previousRow = currentRow;
}
}
在代码中留下非常基本的注释，因此这段代码也适合初学者。希望这对你有所帮助!请注意，您当然需要将我上面提到的所有事件侦听器添加到每个表单元格中，这样才能工作。
