I'm having a question if you can do the following functionality:
I did a drag and drop encoding only in a specific area (The pink area)
The red area is as droppable = false
Can I do an image rotation where it points to the reference point ( ponto-referencia )? As in the following image:
Follow the code as an example (running without 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><!--BiblioetcaJQuery--></head><body><divid="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>