将掉落区域限制为某些可拖动元素

我一直在研究一个需要HTML5拖放的项目,而且我遇到的东西可能很容易实现,但我似乎无法找到解决方案.

基本上我有一些可拖动的元素和一些下降区域.由于使用一个工作示例更容易解释,我已经制作了这个简单的JSFIDDLE

现在您可以将任何元素拖动到任何拖放区域或根据需要将它们移出,但我想要实现的是让橙色框放在任何绿色区域中(并忽略蓝色区域......)如果你将它放在那里,它会移回原来的位置)红色的盒子必须放入蓝色的盒子里(忽略绿色的盒子).

任何人都可以帮助我或提示我一个解决这个问题的方法吗？

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

  Drag&drop testing

  
1
  
2
  
3


  

  

  

  

  

  

  

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

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