Атрибут draggable тега <audio>
Описание
Атрибут draggable определяет, можно ли перетаскивать элемент <audio>. Хотя сам аудио-элемент не имеет стандартного поведения при перетаскивании, этот атрибут может быть полезен при создании пользовательских интерфейсов.
<audio controls draggable="true" id="drag-audio">
<source src="sound.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио элемент.
</audio>
Значения атрибута:
| Значение | Поведение | По умолчанию |
|---|---|---|
true |
Элемент можно перетаскивать | |
false |
Запрещает перетаскивание | ✓ |
auto |
Поведение по умолчанию браузера |
Полная реализация перетаскивания:
<style>
audio[draggable="true"] {
cursor: grab;
}
audio[draggable="true"]:active {
cursor: grabbing;
}
#drop-zone {
border: 2px dashed #ccc;
padding: 20px;
margin: 10px 0;
}
#drop-zone.drag-over {
border-color: #3a86ff;
background-color: #f0f8ff;
}
</style>
<audio draggable="true" id="draggable-player">
<source src="music.mp3" type="audio/mpeg">
</audio>
<div id="drop-zone">Перетащите аудио сюда</div>
<script>
const player = document.getElementById('draggable-player');
player.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', player.src);
e.dataTransfer.effectAllowed = 'copy';
});
document.getElementById('drop-zone').addEventListener('drop', (e) => {
e.preventDefault();
const src = e.dataTransfer.getData('text/plain');
console.log('Перетащен аудио-файл:', src);
});
</script>
Особенности работы:
- Без JavaScript атрибут не имеет видимого эффекта
- Требуется обработка событий
dragstart,dragoverиdrop - Можно перетаскивать как сам элемент, так и данные аудио
- Внешний вид при перетаскивании можно кастомизировать
Рекомендации:
- Всегда устанавливайте
effectAllowedиdropEffect - Предусматривайте визуальную обратную связь
- Для файлов используйте
DataTransferAPI - Тестируйте на мобильных устройствах (требует особого подхода)
Ограничения: Нативные элементы управления аудио могут перехватывать события мыши, мешая перетаскиванию.
Совет: Для сложных сценариев перетаскивания используйте специализированные библиотеки (Dragula, SortableJS).
Примечание: На мобильных устройствах для перетаскивания обычно используются touch-события вместо drag-and-drop API.