Атрибут draggable тега <a>

Описание

Атрибут draggable определяет, можно ли перетаскивать элемент <a> с помощью Drag and Drop API. По умолчанию ссылки имеют особое поведение при перетаскивании.

Базовое использование:
<a href="#" draggable="true">Перетаскиваемая ссылка</a>

Значения атрибута:

Значение Поведение
true Элемент можно перетаскивать
false Элемент нельзя перетаскивать (значение по умолчанию для ссылок)
auto Поведение по умолчанию (равнозначно false для ссылок)
Пример с обработкой событий:
<a href="https://example.com" draggable="true" id="drag-link" data-url="https://example.com"> Перетащите эту ссылку </a> <script> document.getElementById('drag-link').addEventListener('dragstart', function(e) { e.dataTransfer.setData('text/uri-list', this.href); e.dataTransfer.setData('text/plain', this.textContent); }); </script>

Особенности работы со ссылками:

  • По умолчанию браузеры позволяют перетаскивать ссылки как URL
  • Атрибут draggable="false" отключает это поведение
  • Для кастомного поведения нужно предотвращать действие по умолчанию
  • Часто используется вместе с data-* атрибутами

Рекомендации по использованию:

  • Используйте draggable="true" только когда действительно нужно перетаскивание
  • Всегда обрабатывайте события dragstart, dragover и drop
  • Предотвращайте действие по умолчанию в обработчиках (e.preventDefault())
  • Добавляйте визуальные подсказки при перетаскивании
  • Тестируйте на разных устройствах (особенно touch-устройствах)

Совет: Для сложных сценариев перетаскивания рассмотрите использование специализированных библиотек (Dragula, SortableJS) вместо нативной реализации.