在我的应用程序中，我有以下带有 js 和样式表的 html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drag'n'Drop demo</title>
<style>
#dropArea{
min-width:50%;
min-height:800px;
background-color:#FF00BB;
float: left;
}
#imgArea {
min-width:49%;
min-height:800px;
background-color:#0F0FBB;
float: right;
}
#imgArea img {
display:block;
margin:5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
var onDropCallback=function(event){
event.preventDefault();
console.log("Droped")
}
var dragSrart=function(event){
// alert("DragStarted")
console.log("Drag Started");
}
var ondragoverCallback=function(event){
var elem=event.target || event.srcElement;
$(elem).css('border',"1px solid black");
}
var dragEndCallback=function(event){
event.preventDefault();
console.log("Drag End HAppened");
$("#dropArea").css('border',"none");
}
</script>
</head>
<body>
<div id="dropArea" ondragover="ondragoverCallback(event)" ondrop="onDropCallback(event)" ></div>
<div id="imgArea">
<img draggable="true" ondragstart="dragSrart(event)" ondragend="dragEndCallback(event)" src="https://kazasou.files.wordpress.com/2010/08/g288.gif">
</div>
</body>
</html>
但是由于某种原因，即使事件 ondragstart 和 ondragend 被触发，我也无法弄清楚为什么 drop 事件根本不触发。我看过https://www.w3schools.com/HTML/html5_draganddrop.asp以及 https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_draganddrop但我无法弄清楚我的代码与示例有什么不同。
最佳答案
如您所见:https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_draganddrop您必须在 dragover 事件期间 preventDefault，以便 ondragoverCallback 应具有以下代码:
var ondragoverCallback=function(event){
event.preventDefault();
var elem=event.target || event.srcElement;
$(elem).css('border',"1px solid black");
}
关于javascript - HTML5 : "ondrop" event does not fire when I drop an item，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46322587/