Restrict drop areas to some draggable elements

Question

I have been working on a project thet needs HTML5 drag & drop and I'm stuck atm with something that probably would be so easy to achieve but I can't seem to find the solution.

Basically I have some draggable elements and some drop areas. As it's alwasy easier to explain with a working example I have made this simple JSFIDDLE

Right now You can drag any element into any drop area or move them out as I need, but what I would like to achieve is to make the orange boxes to drop JUST in any of the green areas (and ignore the blue one... make it move back to original position if you drop it there) and the red box JUST into the blue one (ignoring the green ones).

Could anyone help me or hint me a way to work on this?

    function DragOver(ev) {
      ev.preventDefault();
    }

    function Drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    }

    function Drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
    }


    var elemens = document.querySelectorAll('.draggable');
    [].forEach.call(elemens, function(elem) {
      elem.addEventListener('dragover', DragOver, false);
      elem.addEventListener('drop', Drop, false);
    });

   #divContenedor {
     width: 950px;
     height: 500px;
   }
   
   #div1,
   #div2,
   #div3 {
     width: 350px;
     height: 70px;
     border: 1px solid #aaaaaa;
     background-color: green;
   }
   
   #div4 {
     width: 350px;
     height: 70px;
     border: 1px solid #aaaaaa;
     background-color: blue;
   }

<p>
  Drag&drop testing</p>
<div id="divContenedor" class="draggable" style="background-color: yellow; width: 100%; float: left; position: relative;">
  <div id="drag1" draggable="true" ondragstart="Drag(event)" style="width: 336px; height: 69px; background-color: orange; cursor: move;">1</div>
  <div id="drag2" draggable="true" ondragstart="Drag(event)" style="width: 336px; height: 69px; background-color: orange; cursor: move;">2</div>
  <div id="drag3" draggable="true" ondragstart="Drag(event)" style="width: 336px; height: 69px; background-color: red; cursor: move;">3</div>
</div>
<div style="position: absolute; top: 100px; left: 500px;">
  <div id="div1" class="draggable" ></div>
  <br />
  <div id="div2" class="draggable" ></div>
  <br />
  <div id="div3" class="draggable" ></div>
  <br />
  <div id="div4" class="draggable" ></div>
</div>

UPDATE JSFIDDLE with @Amen solution.

Answer 1

You can use data attributes logic and do following 3 simple modifications to achieve that

1) add to draggable elements attribute data-appendto="green" or blue

2) add to div elements where you dragable element should append data-boxtype="red" or blue

3) in Drop(ev) function you can check if your document.getElementById(data) and ev.target data attributes values are matching then allow drop. You can get elements data-attribute with js .getAttribute('data-attribute') function

if(ev.target.getAttribute('data-boxtype') == 
   document.getElementById(data).getAttribute('data-appendto')){

  ev.target.appendChild(document.getElementById(data));
}