Я пытаюсь реализовать перетаскивание & падения функции для файлов с рабочего стола браузера и я столкнулся с 2 проблемами:файлы Drag & падение HTML5 проблема
мне нужно событие, которое срабатывает при в процессе перетаскивания, когда листы курсора окно браузера. Вы можете увидеть такой механизм на mail.google.com - текст «Отбросить файлы здесь» исчез, когда пользователь перетаскивает файл в другое место. Я пробовал все перетаскивать события, но они не помогли.
Вторая проблема заключается в том, что мне нужно установить курсор, когда пользователь перетаскивает файлы по всем элементам в «none», за исключением divleplabel. Я знаю, что строка кода ниже меняет курсор, но как изменить его в нормальном режиме, когда курсор достиг «divplabel» div?
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>