Используя событие dragenter, я показываю на веб-странице зону перетаскивания, чтобы быстро сбросить загрузку файлов, и все это работает хорошо. Однако при перетаскивании выделенного текста всплывающая зона также появляется. Как определить разницу на ранней стадии?
Я знаю, что событие drop предоставляет возможность повторения всего содержимого файла с помощью dataTransfer.files, но это уже слишком поздно. Мне это нужно в перетаскивании, только я вижу, что массив файлов всегда пуст.
Мне нужен полный контроль над внешним видом. Я не ищу существующую библиотеку.
Я вижу разные значения для event.dataTransfer.Clipboard.effectAllowed при перетаскивании текста по сравнению с файлами, но значения также различаются в зависимости от браузера (Chrome против FF).
MooTools уже есть, если это поможет.
Ответ 1 · рейтинг 11 · Martin Kool
Хорошо, я добился достаточного прогресса, чтобы различать работу в 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;
}
}
}
Ответ 2 · рейтинг 2 · James M
Мне нужно было определить, перетаскивается ли файл в браузер извне, а не изображение, перетаскиваемое из окна браузера. Я сделал это, прослушав перетаскивание объекта документ. Когда файл перетаскивается в браузер извне, перетаскивание не срабатывает. Итак, если он срабатывает, это означает, что что-то перетаскивается на той же странице.
document.addEventListener('dragstart', function() {
samePageDrag = true;
}, false);
document.addEventListener('dragend', function() {
if (samePageDrag) {
samePageDrag = false;
}
}, false);
При этом вы можете проверить значение samePageDrag после события dragenter или dragover, чтобы определить, перетаскивается ли объект извне браузера или нет.
Ответ 3 · cuixiping
Я написал небольшую функцию для обнаружения перетаскивания файлов.
function isFileTransfer(evt){
return [].some.call(evt.dataTransfer.types,function(t){return t=="Files";});
}
