$ ("body"). on ("drop") с Dropzone.js - PullRequest
Новая
       8

$ ("body"). on ("drop") с Dropzone.js

0 голосов
/ 28 декабря 2018

У меня есть дропзона, которая прекрасно работает.У меня также есть несколько элементов в качестве дополнительных «целей», куда пользователь может удалять файлы.

Проблема в том, что я не знаю, как «перенаправить» отброшенные файлы из целевого элемента в рабочую зону для загрузки.Я бы предпочел что-то вроде следующего примера кода, а не создание нескольких дропзон, поскольку в этом сценарии это выглядит очень забавно, учитывая, что в будущем количество элементов target-drop может составлять 10 или 15+. 

"drop": function(e) {

    e.preventDefault();

    myDropzone.upload(e.originalEvent.dataTransfer); // Any way to do something like this?

}

1 Ответ

0 голосов
/ 31 декабря 2018

Вы можете сделать это довольно легко, зайдя в Dropzone.instances и выбрав нужный экземпляр.Если у вас есть только один, тогда возьмите Dropzone.instances[0].Если у вас их больше одного, вы можете найти тот, в котором есть элемент с правом id.Получив эту ссылку, вы можете вызвать drop и переместиться вдоль объекта dataTransfer из события drop вашей пользовательской зоны.

Код для вашего обработчика события drop может выглядеть следующим образом: 

function (e) {
  // make sure to avoid default browser handling (opens file in a new tab/window)
  e.preventDefault();

  if (e.dataTransfer && e.dataTransfer.files.length) {
    // you could pass along the entire event, but probably best to just pass what you need
    Dropzone.instances[0].drop({ dataTransfer: e.dataTransfer });
  }
}

Вот песочница с рабочим примером.На самом деле он не загружает файлы на сервер, но вы увидите, что они добавляются в рабочую зону, как и ожидалось.

...