HTML 5拖放 - 打开和关闭放置区域

我试图通过拖放在HTML5中制作图片争夺游戏

我的问题是，如果你不小心在上部的一个位置上方释放了一个可拖动元素，它就会消失 .

我需要找到的是一种方法，一旦发生了一次掉落，就在一个元素上关闭'ondrop =“drop（event）”ondragover =“allowDrop（event）'，如果一个可拖动的元素被移开，则将其重新打开 .

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

.cubeContainer {
    height: 210px;
    width: 210px;
}
#div1 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div2 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div3 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div4 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}

<div class="cubeContainer">
  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

<br>
	<div class="cubeContainer" style="width: 450px">
	<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
		<img id="drag1" src="http://www.ieeeaustsb.org/files/2017/05/placeholder-female-square.png" draggable="true" ondragstart="drag(event)" width="100" height="100"></div>
	<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag2" src="http://www.ieeeaustsb.org/files/2017/05/placeholder-female-square.png" draggable="true" ondragstart="drag(event)" width="100" height="100"></div>
	<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag3" src="http://www.ieeeaustsb.org/files/2017/05/placeholder-female-square.png" draggable="true" ondragstart="drag(event)" width="100" height="100"></div>
	<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag4" src="http://www.ieeeaustsb.org/files/2017/05/placeholder-female-square.png" draggable="true" ondragstart="drag(event)" width="100" height="100"></div>
	</div>