Animation and Transform Rotate with Reference Point

Asked

Viewed 51 times

1

I’m wondering if it is possible to realize the following functionality:
I did an encoding for drag and drop only in a specific area (The pink area)
The red area is like droppable = false
There is how I make an image rotation where the same points to the reference point (ponto-referencia)? As in the image below :
inserir a descrição da imagem aqui
inserir a descrição da imagem aqui

Follow the code as an example (running without a reference point)

			//Drag'n Drop functions
			var elementCounter = 0; // Para designar a ID do elemento dropado.

			function allowDrop(ev) {
				if (ev.target.getAttribute("droppable") == "false"){
					ev.dataTransfer.dropEffect = "none"; // dropping is not allowed
					ev.preventDefault();
				} else {
					ev.dataTransfer.dropEffect = "all"; // drop it like it's hot
					ev.preventDefault();
				}
			}

			function drag(ev) {
				if(document.getElementById('conteudo').style.background!='rgb(255, 255, 255)') {
					ev.dataTransfer.setData("text", ev.target.id);
					ev.dataTransfer.effectAllowed = "copy"; 
				} else {
					bootbox.alert("Selecione uma Pulseira.");
				}
			}

			function drop(ev,div) {
			ev.preventDefault();
			var x = ev.clientX;
			var y = ev.clientY;
			var data = ev.dataTransfer.getData("text");
			var copyimg = document.createElement("img");
			var original = document.getElementById(data);
			copyimg.src = original.src;
			div.appendChild(copyimg);
			if(original.parentNode.id == "conteudo"){ 
				if(ev.target.tagName == "IMG" ){ // Se a imagem estiver dropando em uma imagem
					original.parentNode.removeChild(original);
					copyimg.id = "dropped_elem" + (++elementCounter);
					copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 70) + "px;");
					copyimg.setAttribute('draggable', true);
					copyimg.setAttribute('ondragstart', "drag(event)");
				} else {                          // Se não, é porque a imagem está sendo dropada em uma div
					original.parentNode.removeChild(original);
					copyimg.id = "dropped_elem" + (++elementCounter);
					copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
					copyimg.setAttribute('draggable', true);
					copyimg.setAttribute('ondragstart', "drag(event)");
				}
			} else {
				if(ev.target.tagName == "DIV" ){  // Se a imagem está sendo movimentada dentro da div conteudo
					copyimg.id = "dropped_elem" + (++elementCounter);
					copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
					copyimg.setAttribute('draggable', true);
					copyimg.setAttribute('ondragstart', "drag(event)");
				} else {                          // Se não, é porque está sendo dropada na IMG
						copyimg.id = "dropped_elem" + (++elementCounter);
						copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 70) + "px;");
						copyimg.setAttribute('draggable', true);
						copyimg.setAttribute('ondragstart', "drag(event)");
					}
				}
			}
#imagem{
		width:100px;
		height:100px;
		border:1px solid #000;
		z-index:5;
	    opacity:1; 
}

#conteudo > img{
animation: roll 4s infinite;
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.conteudo-externo{
		width:500px;
		height:400px;
		z-index:3;
		background:red;
		border: 0px solid;
		float:left;
	}
	.conteudo{
		width:320px;
		height:300px;
		border-radius:50%;
		border:1px solid #000;
		z-index:5;
		background:#f1f;
	    margin: 40px auto;
}
		.img{
			z-index:1;
			width:130px;
            height:130px
            background-position:center;
			opacity:0.5;
		}

	.conteudo-bloqueio{
		width:280px;
		height:260px;
		border-radius:50%;
		border:1px solid #000;
		z-index:5;
		background:red;
	    margin: 20 auto;
	    opacity:1;
	   }

	  #ponto-referencia{
	  	width:5px;
		height:5px;
		border-radius:50%;
		border:3px solid #000;
		z-index:1;
		background:#000;
	    margin: 120px auto;
	  }
	
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Biblioetca JQuery -->
    </head>
	<body>
		<div id="imagem">
			<img id="drag1" src="http://www.esfcex.eb.mil.br/images/menu_cms/concurso_cms/divulgacoes/seta_para_baixo.png" draggable="true" ondragstart="drag(event)">
		</div>
		<div class="conteudo-externo" id="conteudo-externo"> 
			<div id="conteudo" class="conteudo" ondrop="drop(event, this)" ondragover="allowDrop(event)">
				<div id="conteudo-bloqueio" droppable="false" class="conteudo-bloqueio"> 
					<div id="ponto-referencia" droppable="false">
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

1 answer

0


Browser other questions tagged

You are not signed in. Login or sign up in order to post.