Как определить, является ли перетаскиваемое содержимое текстом или файлами во время события перетаскивания Javascript

Используя событие dragenter, я показываю на веб-странице зону перетаскивания, чтобы быстро сбросить загрузку файлов, и все это работает хорошо. Однако при перетаскивании выделенного текста всплывающая зона также появляется. Как определить разницу на ранней стадии?

  1. Я знаю, что событие drop предоставляет возможность повторения всего содержимого файла с помощью dataTransfer.files, но это уже слишком поздно. Мне это нужно в перетаскивании, только я вижу, что массив файлов всегда пуст.

  2. Мне нужен полный контроль над внешним видом. Я не ищу существующую библиотеку.

  3. Я вижу разные значения для event.dataTransfer.Clipboard.effectAllowed при перетаскивании текста по сравнению с файлами, но значения также различаются в зависимости от браузера (Chrome против FF).

  4. MooTools уже есть, если это поможет.


javascript drag-and-drop file-upload dom-events
person Martin Kool    schedule 16.03.2011    source источник

Ответы (3)


arrow_upward
11
arrow_downward

Хорошо, я добился достаточного прогресса, чтобы различать работу в Chrome и Firefox (3.6+). Вероятно, это не надежно, но на случай, если кому-то это пригодится, вот код:

  var isFileTransfer = false;
  if (evt.dataTransfer.types) {
    for (var i=0; i<evt.dataTransfer.types.length; i++) {
      if (evt.dataTransfer.types[i] == "Files") {
        isFileTransfer = true;
        break;
      }
    }
  }
person Martin Kool    schedule 16.03.2011
comment
Если OP когда-нибудь вернется, отметьте это как ответ. У меня это сработало! - person Brent; 29.11.2012

arrow_upward
2
arrow_downward

Мне нужно было определить, перетаскивается ли файл в браузер извне, а не изображение, перетаскиваемое из окна браузера. Я сделал это, прослушав перетаскивание объекта документ. Когда файл перетаскивается в браузер извне, перетаскивание не срабатывает. Итак, если он срабатывает, это означает, что что-то перетаскивается на той же странице.

document.addEventListener('dragstart', function() {
    samePageDrag = true;
}, false);

document.addEventListener('dragend', function() {
    if (samePageDrag) {
        samePageDrag = false;
    }
}, false);

При этом вы можете проверить значение samePageDrag после события dragenter или dragover, чтобы определить, перетаскивается ли объект извне браузера или нет.

person James M    schedule 02.02.2017
comment
Я обнаружил, что мне нужно добавить еще одного слушателя для события drop, чтобы правильно очистить переменную samePageDrag, но это именно то, что мне нужно. - person Noah Heck; 07.02.2021

arrow_upward
0
arrow_downward

Я написал небольшую функцию для обнаружения перетаскивания файлов.

function isFileTransfer(evt){
    return [].some.call(evt.dataTransfer.types,function(t){return t=="Files";});
}
person cuixiping    schedule 20.04.2015