Функция перетаскивания — это действие по выбору объекта, в данном случае файлов из Оперативной системы в виде изображений, текстовых файлов и т. Д., Их перемещению (перетаскиванию), а затем размещению (перетаскиванию) в альтернативную область (в этом case конкретный элемент DOM документа).
Спецификация рабочего проекта HTML5 включает поддержку перетаскивания drop, поэтому нам не понадобится какая-либо сторонняя библиотека Javascript для достижения этой цели. Перетаскивание является важной функцией, улучшающей пользовательский интерфейс. Эта функция доступна во многих нативных приложениях, поэтому вы, вероятно, захотите внедрить ее в свое гибридное настольное приложение.
Ручка Drag and Drop
Как упоминалось ранее, HTML5 обеспечивает поддержку перетаскивания, поэтому для обработки события перетаскивания в элементе DOM можно использовать следующий фрагмент:
#drag-file {
background-color: blue;
color:white;
text-align: center;
width:300px;
height:300px;
}
Drag your files here
(function () {
var holder = document.getElementById('drag-file');
holder.ondragover = () => {
return false;
};
holder.ondragleave = () => {
return false;
};
holder.ondragend = () => {
return false;
};
holder.ondrop = (e) => {
e.preventDefault();
for (let f of e.dataTransfer.files) {
console.log('File(s) you dragged here: ', f.path)
}
return false;
};
})();
Мы добавляем некоторый слушатель события к нашему желаемому элементу DOM. Это может быть либо документ, либо даже элемент span. ondrop Событие будет запущено, когда пользователь оставит файлы на элементе.
Обратите внимание, что важно установить ondragover, ondragleave а также ondragend возвращенные значения как ложные, чтобы предотвратить поведение по умолчанию (т.е. с изображениями, если вы перетаскиваете изображение, текущий документ исчезнет и будет заменен изображением, и вы не сможете вернуться назад).
Каждый объект в массиве файлов имеет следующую структуру:
{
"lastModified": 1476893272627,
"lastModifiedDate": "WedOct19 2016 18: 0 7: 52GMT+0200(MitteleuropäischeSommerzeit)",
"name": "myfilename.png",
"path": "C:\path-to\myfilename.png",
"size": 10648,
"type": "image/png",
"webkitRelativePath": ""
}Реализация предыдущего фрагмента должна иметь в результате:
Об этой функции в браузере Google Chrome
Если вы внимательны, вы, вероятно, заметили, что для работы этой функции не требуется встроенный или внешний модуль. Итак, какой смысл публиковать эту статью, если вы можете сделать это так же, как в Javascript в браузере? Ответ прост, он тоже работает, но вы не получите ту же информацию.
Если вы выполните показанный фрагмент в любом браузере, который поддерживает эти события, вы обнаружите, что объект имеет другую структуру:
{
"lastModified": 1476893272627,
"lastModifiedDate": "WedOct19 2016 18: 0 7: 52GMT+0200(MitteleuropäischeSommerzeit)",
"name": "myfilename.png",
"size": 10648,
"type": "image/png",
"webkitRelativePath": ""
}Как вы можете видеть в Google Chrome или любом обновленном браузере, он не содержит свойства пути (полный путь к файлу). Это происходит потому, что в соответствии со спецификациями HTML5, элемент управления загрузкой файлов не должен показывать реальный локальный путь к выбранному вами файлу, если вы управляете строкой значения с помощью JavaScript. Это требование уже реализовано в Internet Explorer 8 — реальный путь к файлу будет показан, только если страница, содержащая элемент управления, добавлена в коллекцию доверенных сайтов браузера.
К счастью, Electron — это больше, чем веб-браузер, поэтому он устраняет это известное ограничение (которое, так или иначе, является не ограничением, а функцией безопасности, которая нам не нужна в этом случае, так как приложение для настольного компьютера, очевидно, имеет права изменять объекты в система).
Повеселись !
