jQuery: загрузка методом перетаскивания с несколькими зонами перетаскивания

Я хочу разработать дерево папок и файлов с загрузкой в ​​папки перетаскиванием.

Пример:

Для загрузки методом перетаскивания я финансирую Загрузка файла jQuery .

Основной код:

$('#fileupload').fileupload({
    dataType: 'json',
    url: 'php/index.php',
    dropZone: $(document),
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('
').text(file.name).appendTo(document.body);
        });
    }
});

В моем проекте у меня есть несколько зон ввода (мои папки), например:

    
Bookmarks
    
Search
    
Web dev
    ...

Как изменить приведенный выше код для обработки нескольких зон ввода с селекторами id, class и jQuery?

Я пробовал что-то вроде этого, но, очевидно, это не сработало:

    
Bookmarks
    
Search
    
Web dev
    ...

.

$('.folder').fileupload({
    dataType: 'json',
    url: 'php/index.php',
    dropZone: $('.folder'),
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('
').text($(this).attr(id)).appendTo(document.body);
        });
    }
});

Проблемы:

• загрузка выполняется 3 раза.
• $ (это) не существует.