Как запретить событию drag & drop реарировать на всё кроме файлов?

Question

[Святослав Немато]

//Загружаем 
var loadFile = $('#ads_panel_pc'),
	maxFileSize = 100*1024*1024; // максимальный размер фалйа.

// Проверка поддержки браузером
if (typeof(window.FileReader) == 'undefined') {
	$("#error").html("<h3>Внимание!</h3><p>Не поддерживается браузером!</p>");
}

// Добавляем класс hover при наведении
loadFile[0].ondragover = function(event) {
	$('#drag_and_drop_file').show();
	return false;
};

$('#drag_and_drop_file')[0].ondragleave = function() {
	$('#drag_and_drop_file').hide();
}

// Убираем класс hover
loadFile[0].ondragleave = function() {
	return false;
};

// Обрабатываем событие Drop
loadFile[0].ondrop = function(event) {
	$('#drag_and_drop_file').hide();
	event.preventDefault();
	if (event.dataTransfer.files[0]) {		 
		var file = event.dataTransfer.files[0];
		// Проверяем размер файла
		if (file.size > maxFileSize) {
			$("#error").html("<h3>Внимание!</h3><p>Файл слишком большой!</p>");
			return false;
		}
		var params = new FormData();
			params.append('file', file);
		// Создаем запрос
		var xhr = getXmlHttpRequest();
			xhr.upload.addEventListener('progress', uploadProgress, false);
			xhr.onreadystatechange = stateChange;
			xhr.open('POST', '/components/ajax/ajax.php?task=ReadFileAds');
			xhr.setRequestHeader("X-Header", encodeURIComponent(file.name));
			xhr.send(params);
	}
};

// Показываем процент загрузки
function uploadProgress(event) {
	var percent = parseInt(event.loaded / event.total * 100);
		$('#status_load_file').css({width: percent+'%'}).html('<center>Загрузка: ' + percent + '%</center>');
}

// Пост обрабочик
function stateChange(event) {
	$('#drag_and_drop_file').hide();
	if (event.target.readyState == 4) {
		if (event.target.status == 200) {
			console.log(event.target.responseText);
		} else {
			$('#error').html('<h3>Внимание!</h3><p>Произошла ошибка!</p>');
		}
	}
	$('#status_load_file').html('');
}

Код работает нормально, за исключением одного, если я выделяю текст и начинаю его перетаскивать срабатывает событие $('#drag_and_drop_file').show();
Как от этого избавиться?

Comments

[Kovalsky]

Вероятно стоит в ondragover проверять event на наличие файлов

[Святослав Немато]

Никита Полевой, Написал так

// Добавляем класс hover при наведении
loadFile[0].ondragover = function(event) {
	if (event.dataTransfer.files[0]) {
		$('#drag_and_drop_file').show();
	}
	return false;
};

Теперь событие $('#drag_and_drop_file').show(); вообще не срабатывает

[Kovalsky]

Святослав Немато, а если !event.dataTransfer.files.length вместо event.dataTransfer.files[0] ?

[Святослав Немато]

Никита Полевой, консоль показывает что event.dataTransfer.files.length при наведении файла и при наведении текста равен 0

[Kovalsky]

Святослав Немато, как мило. Ну, не знаю, на вашем месте я бы просто вывел event в консоль и сравнил бы в обоих случаях, чтобы найти отличие.

[Святослав Немато]

Никита Полевой,

screenX:655
screenY:561

Это 2 единственных параметра которые различаются. координаты x и y

Answer 1

[Kovalsky]

Кажется браузер не даёт ивенту ondragover такой информации (1, 2), так что вероятно придётся устанавливать некую переменную в true при mousedown/ondragstart для document и соответственно проверять её в ondragover.

Comments

[Святослав Немато]

Спасибо, то что надо.