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);

       }
    }

我使用循环来执行drop事件：

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

虽然下降不再有效，但css甚至不会改变dragover的边界。我该如何解决这个循环？

Answer 1

您不需要执行循环来应用处理程序。摆脱每一个并将其改回

var obj = $(".Droppable");

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

多个文件拖放区域

1 个答案: