JS и HTML, загрузка картинки и её перемещение

Web
#1

Здравствуйте! Я нахожусь сейчас только на начальных стадиях изучения, так что не судите строго - открыт к конструктивной критике -, но есть необходимость сейчас создать несложную программу. (С удовольствием для этого изучу то, что нужно)

Это HTML-страница с большой частью интерактива с пользователем.
Суть непонятного на данный момент участка программы (нужно сделать):

  1. Кнопка (1) для загрузки пользователем изображения с его устройства (для простоты — ПК).

  2. Это изображение пользователь будет двигать мышью и где мышь отпустит — там изображение и должно остаться. То есть подключить к изображению функцию Draggable или что-то подобное с описанием событий старта передвижения, процесса и что происходит, когда отпускают мышь.

(Скрипты искал, внятные не нашёл, наверное плохо искал))

Конечно буду бесконечно благодарен готовым скриптам (вроде бы они не сложные, но я, конечно, могу ошибаться)

Но если нет возможности найти/сделать скрипты — буду рад если объясните как это всё сделать.

(Не исключаю, что вышеперечисленное может быть создано удобнее на другом языке)

#2

Что за программа, что делать должна кроме этого?
Где запускается? Это просто локальный HTML файл или сервер есть?

Для создания десктопных приложений с помощью веб-технологий обычно используют Electron.

Иначе могут быть разные сложности из-за настроек безопасности обычных браузеров. Например, мне когда-то давно пришлось использовать хотя бы локальный веб-сервер (например Mongoose, это просто один .ехе), чтобы получить доступ к локальным файлам из JS (там нужен был автоматический доступ из скрипта к куче разных файлов, с ручной загрузкой наверно нет таких проблем).

Как-то так наверно: https://stackoverflow.com/a/45931408/964478

var img = document.querySelector('#myImg');

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (this.files && this.files[0]) {
          img.src = URL.createObjectURL(this.files[0]);
          img.onload = imageLoaded;
      }
  });
});

function imageLoaded() { 
  alert('Uploaded! ' + img.src);
}

<input type="file" />
<br><img id="myImg" alt="your image">

Еще может это пригодится: https://www.dropzonejs.com/