HTML | Перетащить и отпустить

Перетаскивание - это очень интерактивная и удобная для пользователя концепция, которая упрощает перемещение объекта в другое место путем его захвата. Это позволяет пользователю щелкнуть и удерживать кнопку мыши над элементом, перетащить его в другое место и отпустить кнопку мыши, чтобы опустить элемент туда. В HTML 5 Drag and Drop намного проще кодировать, и любой элемент в нем можно перетаскивать.

События перетаскивания: существует множество событий перетаскивания, некоторые из них перечислены ниже:

Объект передачи данных: свойство передачи данных используется, когда происходит весь процесс перетаскивания. Он используется для удержания перетаскиваемых данных из источника в нужное место. С ним связаны следующие свойства:

Процедура перетаскивания:

• Шаг 1. Сделайте объект перетаскиваемым
  • Сначала установите для атрибута draggable значение true, чтобы этот элемент можно было перетаскивать <img draggable = «true»>
  • Затем укажите, что должно произойти при перетаскивании элемента. Атрибут ondragstart вызывает функцию drag (event), которая указывает, какие данные нужно перетащить. Метод dataTransfer.setData () устанавливает тип данных и значение перетаскиваемых данных.
  • Слушатель событий ondragstart установит разрешенные эффекты (копирование, перемещение, ссылка или некоторая комбинация).

  function dragStart (ev) {
      ev.dataTransfer.setData ("текст", ev.target.id);
  }
  

• Шаг 2: Отбрасываем объект
  • Событие ondragover указывает, куда можно перетащить перетаскиваемые данные. По умолчанию данные / элементы нельзя отбрасывать в другие элементы. Чтобы разрешить сброс, он должен предотвратить обработку элемента по умолчанию. Это делается путем вызова метода event.preventDefault ().
  • Наконец, событие drop, которое позволяет выполнить фактическое падение.

  function dragDrop (ev) {
      ev.preventDefault ();
      var data = ev.dataTransfer.getData («текст»);
      ev.target.appendChild (document.getElementById (данные));
  }
  

Пример 1:

Выход:

Объяснение:

• Начните перетаскивание, установив для свойства draggable элемента, который нужно перетащить, значение true.
• Получите перетаскиваемые данные с помощью метода dataTransfer.getData (). Этот метод вернет любые данные, для которых был задан тот же тип в методе setData ().
• Вызовите метод event.preventDefault (), чтобы разрешить удаление элементов в других элементах, предотвращая обработку элемента по умолчанию.
• Элемент хранится в переменных данных, которые мы добавляем в элемент drop.

Example 2: This example illustrate the image drag and drop.

Выход: