Javascript 多个文件拖放区域

我试图扩展找到的代码；我希望有几个盒子被放入，并使用盒子的id根据它们被放入的盒子对文件进行排序

我添加了第二个框，添加了类，并更改了ID：

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

---

不过，拖放不再有效，css甚至不会更改dragover上的边界。如何修复此循环

应用处理程序不需要执行循环。把每一个都扔掉，把它改回原样

var obj = $(".Droppable");

---

jQuery将把事件处理程序应用于选择器返回的所有对象。

好的，这确实解决了这个问题，但是您知道为什么我在第

fd.append（'folder'，obj.attr（'id'）行和第
Box1
行中都出现了
我在发布答案时键入了有关使用$（此）的内容，但显然在编辑过程中忘记了单击“保存”。）
$(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();
            });
        });
    });

var obj = $(".Droppable");