javascript - 如何将 div 停用为 dropzone

Question

我在另一个更大的 div 中有三个带有标题和图像的 div。我正在尝试将它们拖放到周围，但如果我将它放在另一个 div 上方，它们会相互放置。如何禁用将图像作为 dropzone 的 de div？我使用 JavaScript、HTML 和 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>