我正在试图弄清楚如何正确地进行拖放操作,而且从我在MDN上阅读的内容来看,听起来我应该能够通过dragenter来指示该元素上可能存在丢弃。我根本无法让它工作,但当我切换到拖动时,它似乎开始工作。我真的不想注册一个dragover事件处理程序,因为每次鼠标在一个区域内移动时我都不需要调用它。有没有办法完全避免注册dragover处理程序进行拖放?
这就是我与dragover合作的事情:
<div id="main">
<div id="a" draggable="true">a</div>
<div id="c">b</div>
</div>
<style>
div {
display: inline-block;
border: 1px solid black;
}
#c {
height: 100px;
width: 100px;
}
</style>
<script type='text/javascript'>
var a = document.getElementById('a')
var c = document.getElementById('c')
a.addEventListener('dragstart', function(event) {
var dt = event.dataTransfer;
dt.setData("object/jsObject", {test:1});
dt.setData("text/plain", "test one");
})
c.addEventListener('dragover', function(event) {
if(event.preventDefault){
event.preventDefault();
}
console.log(event)
})
c.addEventListener('drop', function(event) {
console.log(event)
c.innerHTML = 'dropped '+event.dataTransfer.getData(event.dataTransfer.types[0])
event.dataTransfer.dropEffect = 'move';
})
</script>
有没有办法用dragenter取代dragover?
更新:
哦,这里有一些有趣的东西,显然是HTML5拖放api is absolute shite。我自己也开始得出这个结论了。