Я пытаюсь реализовать функцию перетаскивания для файлов с рабочего стола в браузер, и я столкнулся с двумя проблемами:
Мне нужно событие, которое запускается при перетаскивании, когда курсор покидает окно браузера.Вы можете увидеть такой механизм на mail.google.com - текст «Перетащите файлы сюда» исчезает, когда пользователь перетаскивает файл куда-то еще.Я перепробовал все события перетаскивания, но они не помогли.
Вторая проблема заключается в том, что мне нужно установить курсор, когда пользователь перетаскивает файлы по всем элементам на «none», кроме «droplabel» div.Я знаю, что строка кода ниже меняет курсор, но как изменить его на нормальный, когда курсор достигает div «droplabel»?
evt.dataTransfer.effectAllowed = 'move';
Кто-нибудь знает, как решить эту проблему?
<html>
<body>
<form>
<div id="droplabel" style="width:200px;height:200px;background-color:red">Drop file here...</div>
<script>
function handleDrop(evt) {
evt.stopPropagation(); // Stops some browsers from redirecting.
evt.preventDefault();
var files = evt.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
console.log(files[i].name);
}
}
function handleDragOver(evt) {
if (evt.preventDefault) {
evt.preventDefault(); // Necessary. Allows us to drop.
}
return false;
}
document.getElementById('droplabel').ondrop = handleDrop;
document.getElementById('droplabel').ondragover = handleDragOver
var body = document.getElementsByTagName('body')[0];
document.ondragover = function (evt) {
evt.preventDefault();
}
document.ondrop = function (evt) {
evt.stopPropagation(); // Stops some browsers from redirecting.
evt.preventDefault();
}
</script>
</form>
</body>
</html>