拖动对象可见并在javascript中还原

Question

我有3个ID为div1的盒子和一个ID为drag1的盒子。框drag1可以拖放到div1框中。

I want to know if there is a way the div drag1 can be seen during the drag in javascript，就像在jquery中一样。有没有可能退回

因为我不想强行将功能更改为jquery

如何实现？

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));
		
		
	}
	
/*	
	 $("#drag1").draggable({
					revert: "valid",
					drag: function (event, ui) {
							$("#info").html("<font color=red>This square will go back to it`s original position once it`s dropped in target zone. </font>");
					}
			});
			
      
$("#div1").droppable({
	drop: function (event, ui)
  {
	$(this).css("background-color", "lightgreen")
	},
	out: function (event, ui) 
  {
	$(this).css("background-color", "")
	}
			});
	});			
  
  */

#div1 {
    width:120px;
    height: 100px;
    padding: 10px;
    border: 1px solid #aaaaaa;
	float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


<img id="drag1" src="https://picsum.photos/200/300/?random" 
draggable="true" ondragstart="drag(event)" width="100" height="100" style="border:solid">