Drag and Drop - Blocking ondrop on a div Child

Question

I have a div circular (smaller and red) within a div circular (larger and blue).

I would like to block drag and drop in the smaller circular area and allow only in the area blue, follow the example:

In the script there is a if that if the image falls on top of the image she plays a little to the side, please disregard this part.

Edit1: I edited for better understanding, it always falls on the condition that it is in the content div, never on the condition that it fell in the content div-block.

//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>
  <!-- Biblioetca JQuery -->
</head>

<body>
  <img id="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>

Answer 1

I was able to change the allowdrop to see if where the element is falling droppable=false

                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();
                }
            }