How to deactivate a div as dropzone

Question

I have three divs with a title and an image in an other, bigger div. I'm trying to drag and drop them around, but if I drop it above an other div they drop in each other. How can I disable de divs with the image as a dropzone? I worked with JavaScript, HTML and css.

<div class=dirFiles>
    <div draggable='true' onmousedown='ablegenVerbieten()' class='file'>
        <p>Title</p>
        <img></img>
    </div>
    <div draggable='true' onmousedown='ablegenVerbieten()' class='file'>
        <p>Title</p>
        <img></img>
    </div>
    <div draggable='true' onmousedown='ablegenVerbieten()' class='file'>
        <p>Title</p>
        <img></img>
    </div>
</div>
     <script>

       function ziehen(ev) {
         ev.dataTransfer.setData('text', ev.target.id);
       }

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

       function ablegenVerbieten(ev) {
         oevent.preventDefault ? event.preventDefault() : event.returnValue = false;
       }

       function ablegen(ev) {
         ev.preventDefault();
         var data = ev.dataTransfer.getData('text');
         var target = ev.target;
         while (" "+target.className+" ".indexOf(" dirFiles ") == -1) target = target.parentNode;
         target.appendChild(document.getElementById(data));
       }

       window.addEventListener("load",function () {
         var elms = document.querySelectorAll(".dirFiles");
         for (var i = 0; i < elms.length; i++) {
           var dirFiles = elms[i];
           dirFiles.addEventListener("drop",ablegen);
           dirFiles.addEventListener("dragover",ablegenErlauben);
         };

         elms = document.querySelectorAll("[draggable=true]")
         for (var i = 0; i < elms.length; i++) {
           var draggable = elms[i];
           draggable.addEventListener("dragstart",ziehen);
         };
       });
     </script>