Mehrere Dateien Drag & Drop-Bereiche

Question

Ich versuche, den gefundenen Code zu erweitern here; Ich möchte mehrere Boxen haben, die hereingelegt werden, und die ID der Box verwenden, um die Dateien zu sortieren, je nachdem, in welche Box sie fallen gelassen werden.

Ich habe eine zweite Box hinzugefügt, die Klasse hinzugefügt und die ID geändert:

<div class="DropBox" id="Box1">Drag & Drop Files Here</div> 
<div class="DropBox" id="Box2">Drag & Drop Files Here</div> 

änderte ich die Datei-Upload die ID zu verwenden:

Und ich verwendet, um eine Schleife für die Drop-Ereignisse:

$(document).ready(function() 
    { 
     $('.DropBox').each(function(i, obj) { 
      //var obj = $("#Box1"); 
      obj.on('dragenter', function (e) 
      { 
       e.stopPropagation(); 
       e.preventDefault(); 
       obj.style.border('2px solid #0B85A1'); 
      }); 

      obj.on('dragover', function (e) 
      { 
       e.stopPropagation(); 
       e.preventDefault(); 
      }); 

      obj.on('drop', function (e) 
      { 

       obj.style.border('2px dotted #0B85A1'); 
       e.preventDefault(); 
       var files = e.originalEvent.dataTransfer.files; 

       //We need to send dropped files to Server 
       handleFileUpload(files, obj); 
      }); 

      $(document).on('dragenter', function (e) 
      { 
       e.stopPropagation(); 
       e.preventDefault(); 
      }); 

      $(document).on('dragover', function (e) 
      { 
       e.stopPropagation(); 
       e.preventDefault(); 
       obj.style.border('2px dotted #0B85A1'); 
      }); 

      $(document).on('drop', function (e) 
      { 
       e.stopPropagation(); 
       e.preventDefault(); 
      }); 
     }); 
    }); 

Die Tropfen funktionieren nicht mehr, die CSS ändert nicht einmal die Grenze beim Ziehen. Wie kann ich diese Schleife reparieren?

Answer 1

Sie sollten keine Schleife ausführen müssen, um die Handler anzuwenden. Befreien Sie die einzelnen und ändern Sie sie wieder in

jQuery wird den Event-Handler auf alle Objekte anwenden, die von Ihrem Selektor zurückgegeben werden.