Как масштабировать призрачное изображение при перетаскивании изображения поверх div с помощью Javascript? - PullRequest
0 голосов
/ 21 февраля 2019

Пожалуйста, помогите мне сделать эффект масштаба x2 призрачного изображения, когда пользователь перетаскивает это изображение через div, как показано ниже:

enter image description here

Вот мой код (я пытался использовать 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>

Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...