I have a% circular (lower and red)% within a% circular (greater and blue)%.
I would like to block drag and drop in the smaller circular area and allow only in the blue area, follow the example below:
In the script there is
div
that if the image falls on top of the image it plays a little to the side, please neglect this part.
Edit1: I edited for better understanding, it always falls into the condition that it is in the content div, never in the condition that it fell into the content-lock div.
//Drag'n Drop functions
var elementCounter = 0; // Para designar a ID do elemento dropado.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "copy";
}
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);
var altura = document.getElementById("drag1").height;
var largura = document.getElementById("drag1").width;
var c = x - largura;
var d = y - altura;
//var idParent = original.parentElement;
//document.getElementById("msg3").innerHTML="X (Ponto A): " + c + " Y (Ponto A): " + d;
//document.getElementById("msg4").innerHTML="X (Ponto B): " + x + " Y (Ponto B): " + y;
copyimg.src = original.src;
div.appendChild(copyimg);
if (original.parentNode.id == "conteudo-bloqueio" || copyimg.parentNode.id == "conteudo=bloqueio") {
console.log(original.parentNode.id);
console.log(copyimg.parentNode.id);
alert("estou no bloqueio");
} else {
console.log(original.parentNode.id);
console.log(copyimg.parentNode.id);
alert("estou fora do bloqueio");
}
if (original.parentNode.id == "conteudo") {
if (ev.target.tagName == "IMG") { // Se a imagem estiver dropando em uma imagem
//console.log(ev.target.tagName);
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
//console.log(ev.target.tagName);
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
//console.log(ev.target.tagName);
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
// console.log(ev.target.tagName);
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)");
}
}
}
.conteudo-externo {
width: 500px;
height: 500px;
z-index: 3;
background: red;
border: 1px solid;
float: left;
}
.conteudo {
width: 320px;
height: 300px;
border-radius: 50%;
border: 1px solid #000;
z-index: 5;
background: blue;
margin: 35px auto;
}
.img {
z-index: 1;
width: 130px;
height: 130px background-position:center;
opacity: 0.5;
}
.conteudo-bloqueio {
width: 250px;
height: 230px;
border-radius: 50%;
border: 1px solid #000;
z-index: 5;
background: red;
margin: -50 auto;
/*opacity:0;*/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--BiblioetcaJQuery--></head><body><imgid="drag1" width="100" height="100 " src="http://www.vannwilliamscustomhomes.com/wp-content/uploads/2013/07/250x250.png"draggable="true" ondragstart="drag(event)" alt="" />
<div class="conteudo-externo" id="conteudo-externo">
<div id="conteudo" class="conteudo" ondrop="drop(event, this)" ondragover="allowDrop(event)">
<div id="conteudo-bloqueio" class="conteudo-bloqueio"> </div>
</div>
</div>
</body>
</html>