使用Javascript将图片拖到div上时如何缩放鬼影图像？

Question

当用户在div上将该图像拖到div上时，请帮助我制作x2鬼影效果图，如下视频：

这是我的代码（我尝试使用e.dataTransfer.setDragImage更新事件“ dragenter”中的图像，但不起作用）：

var containerElement = document.getElementById('containter');
containerElement.addEventListener('dragenter', function(e) {
	// Need scale image here
	var ghostImageElement = document.getElementById('drag_ghost_image');
	$(ghostImageElement).width($(dragImage).width() * 2);
	$(ghostImageElement).height($(dragImage).height() * 2);

	e.dataTransfer.setDragImage(ghostImageElement, 0, 0);

}, true);

containerElement.addEventListener('dragleave', function(e) {
	// Need scale image here
	var ghostImageElement = document.getElementById('drag_ghost_image');
	$(ghostImageElement).width($(dragImage).width());
	$(ghostImageElement).height($(dragImage).height());

	e.dataTransfer.setDragImage(ghostImageElement, 0, 0);

}, true);

var dragImageElement = document.getElementById('dragImage');
dragImageElement.addEventListener('dragstart', function(e) {

	// Make trace image
	var crt = this.cloneNode(true);
	crt.setAttribute('id', 'drag_ghost_image');
	crt.style.position = "absolute";
	crt.style.top = "0";
	crt.style.right = "0";
	$(crt).width($(this).width());
	$(crt).height($(this).height());

	document.body.appendChild(crt);
	e.dataTransfer.setDragImage(crt, 0, 0);


}, true);

dragImageElement.addEventListener('dragend', function(e) {
	var element = document.getElementById('drag_ghost_image');
	element.parentNode.removeChild(element);
}, true);

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div>
		<img id="dragImage"
			 src="https://futushigame.firebaseapp.com/demo-thumb.jpg" 
			 data-large-img="https://futushigame.firebaseapp.com/demo-big.jpg">
	</div>
	<div id="containter" style="width: 100%; height: 500px; background-color: gray">
		Drag over me
	</div>

谢谢！