Home-theater-designers
Перетаскивание — это важная функция, которая улучшает взаимодействие с пользователем и обеспечивает удобство работы с ним. Если вы хотите создать загрузчик файлов, сортируемый список или интерактивную игру, понимание того, как использовать возможности этого API, является важнейшим навыком, который необходимо иметь в своем наборе инструментов веб-разработки.
МУО Видео дня ПРОКРУТИТЕ, ЧТОБЫ ПРОДОЛЖИТЬ С СОДЕРЖАНИЕМ
Основы перетаскивания в HTML
В типичной системе перетаскивания существует два типа элементов: первый тип включает перетаскиваемые элементы, которые пользователи могут перемещать с помощью мыши, а второй тип включает перетаскиваемые элементы, которые обычно указывают, где пользователи могут разместить элемент.
Чтобы реализовать перетаскивание, вы должны сообщить браузеру, какие элементы вы хотите перетаскивать. Чтобы пользователь мог перетаскивать элемент, этот элемент должен иметь перетаскиваемый HTML-атрибут установлен в истинный , так:
<div draggable="true">This element is draggable</div>
Когда пользователь запускает событие перетаскивания, браузер предоставляет «призрачное» изображение по умолчанию, которое обычно обеспечивает обратную связь относительно перетаскиваемого элемента.
Вы можете настроить это изображение, предоставив вместо него собственное изображение. Для этого выберите перетаскиваемый элемент в DOM, создайте новое изображение, представляющее пользовательское изображение обратной связи, и добавьте перетащить начало перетащите прослушиватель событий следующим образом:
let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
event.dataTransfer.setDragImage(img, 10, 10);
})
В приведенном выше блоке кода setDragImage метод имеет три параметра. Первый параметр ссылается на изображение. Остальные параметры представляют собой горизонтальное и вертикальное смещение изображения соответственно. Когда вы запустите код в браузере и начнете перетаскивать элемент, вы заметите, что пользовательское изображение перетаскивания было заменено пользовательским изображением, установленным ранее.
Если вы хотите разрешить отбрасывание, вы должны предотвратить поведение по умолчанию, отменив оба более терпимо и Перетащите над события, например:
const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
ev.preventDefault();
});
Понимание интерфейса DragEvent
JavaScript имеет DragEvent интерфейс, который представляет собой взаимодействие пользователя с помощью перетаскивания. Ниже приведен список возможных типов событий в разделе DragEvent интерфейс.
- тащить : пользователь запускает это событие при перетаскивании элемента.
- несущий : это событие возникает, когда операция перетаскивания завершается или когда пользователь прерывает ее. Типичная операция перетаскивания может завершиться отпусканием кнопки мыши или нажатием клавиши Escape.
- более терпимо : перетаскиваемый элемент вызывает это событие, когда попадает в допустимую цель перетаскивания.
- драглиф : это событие срабатывает, когда перетаскиваемый элемент покидает цель перетаскивания.
- Перетащите над : когда пользователь перетаскивает перетаскиваемый элемент на цель перетаскивания, событие срабатывает.
- перетащить начало : Событие срабатывает в начале операции перетаскивания.
- уронить : пользователь запускает это событие, когда перетаскивает элемент в цель перетаскивания.