javascript - 多个文件拖放区域

Question

我正在尝试扩展发现的代码 here ;我想要放入几个盒子，并使用盒子的 id 根据放入的盒子对文件进行排序。

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

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

我更改了文件上传以使用 ID:

function handleFileUpload(files,obj)
    {
       for (var i = 0; i < files.length; i++) 
       {
            var fd = new FormData();
            fd.append('fileName', files[i]);
            //Set any additional file info here. 
            fd.append('folder', obj.id);


            var status = new createStatusbar(obj); //Using this we can set progress.
            status.setFileNameSize(files[i].name,files[i].size);
            sendFileToServer(fd,status);

       }
    }

我对放置事件使用了循环:

$(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();
            });
        });
    });

尽管 drop 不再起作用，CSS 甚至不会改变拖拽时的边框。我该如何修复这个循环？

Answer 1

您不需要执行循环来应用处理程序。去掉each并将其改回

var obj = $(".Droppable");

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