draggable
Разрешает или запрещает перетаскивание элемента мышью.
Синтаксис
<div draggable="true">…</div>Параметры
| Параметр | Тип | Описание |
|---|---|---|
| draggable | true | false | Можно ли перетаскивать элемент. |
Примеры
Перетащите карточку в корзину:
<p id="card" draggable="true" ondragstart="event.dataTransfer.setData('text', 'card')"
style="display: inline-block; padding: 8px; background: lightblue; cursor: grab;">Drag me</p>
<div ondragover="event.preventDefault()" ondrop="this.append(card)"
style="min-height: 60px; border: 2px dashed gray; padding: 8px;">Drop here</div>Запрет перетаскивания картинки:
<img src="/media/photo-200x200.jpg" alt="Coffee beans" width="100" draggable="false">Примечания
Ссылки и картинки перетаскиваются по умолчанию, остальные элементы — только с draggable="true". Сам атрибут лишь разрешает начать перетаскивание; куда элемент можно бросить и что при этом происходит, описывают в JavaScript событиями dragstart, dragover и drop. На сенсорных экранах этот механизм почти не работает.
См. также
- contenteditable — Делает содержимое элемента редактируемым прямо на странице.
- <img> — Картинка.
В учебнике
- Атрибуты — Как устроены атрибуты HTML, глобальные атрибуты id, class, title, lang, hidden и style, логические атрибуты и data-атрибуты.