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

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

7 голосов
/ 23 декабря 2011

Я хочу создать дерево папок и файлов с возможностью перетаскивания в папки.

Пример:

enter image description here

Для загрузки с помощью перетаскивания я финансирую jQuery File Upload .

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

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

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

<ul>
    <li>Bookmarks</li>
    <li>Search</li>
    <li>Web dev</li>
    ...
</ul>

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

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

<ul>
    <li id="folder1" class="folder">Bookmarks</li>
    <li id="folder2" class="folder">Search</li>
    <li id="folder3" class="folder">Web dev</li>
    ...
</ul>

. 

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

Вопросы:

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

1 Ответ

12 голосов
/ 23 декабря 2011

Я нашел решение с коллегой.

На самом деле это было не сложно: 

    $('.folder').each(function(){
        var $this = $(this);

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

Редактировать: мой плохой, этот ответ был в документации .

...