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

Question

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

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

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

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

4. MooTools на месте, если это поможет.

Answer 1

Хорошо, я достаточно продвинулся, чтобы различать работу в 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;
      }
    }
  }

Answer 2

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

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

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

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

Answer 3

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

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