Атрибут draggable тега <aside>
Описание
Атрибут draggable определяет, можно ли перетаскивать элемент <aside> с помощью Drag and Drop API. Может принимать значения true (перетаскивание разрешено), false (запрещено) или auto (поведение по умолчанию).
<aside draggable="true" id="draggable-panel">
<h3>Перетаскиваемая панель</h3>
<p>Попробуйте перетащить этот элемент</p>
</aside>
<script>
document.getElementById('draggable-panel').addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', this.id);
this.style.opacity = '0.4';
});
</script>
Особенности работы:
| Значение | Поведение | Когда использовать |
|---|---|---|
true |
Элемент можно перетаскивать | Для перемещаемых боковых панелей |
false |
Элемент нельзя перетаскивать (по умолчанию) | Для статического контента |
auto |
Поведение по умолчанию браузера | Редко используется |
Полный пример с зоной сброса:
<style>
.draggable-aside {
border: 2px solid #4CAF50;
padding: 15px;
cursor: grab;
background: #f8f9fa;
}
.drop-zone {
border: 2px dashed #ccc;
min-height: 100px;
margin: 10px 0;
padding: 20px;
}
.dragging {
opacity: 0.5;
border-color: #2196F3;
}
.highlight {
background: #e3f2fd;
}
</style>
<aside draggable="true" class="draggable-aside">
<h3>Боковая панель</h3>
<p>Перетащите меня в зону ниже</p>
</aside>
<div class="drop-zone">Зона сброса</div>
<script>
const aside = document.querySelector('aside');
const dropZone = document.querySelector('.drop-zone');
// Обработка начала перетаскивания
aside.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', this.id);
this.classList.add('dragging');
});
// Обработка окончания перетаскивания
aside.addEventListener('dragend', function() {
this.classList.remove('dragging');
});
// Обработчики для зоны сброса
dropZone.addEventListener('dragover', function(e) {
e.preventDefault();
this.classList.add('highlight');
});
dropZone.addEventListener('dragleave', function() {
this.classList.remove('highlight');
});
dropZone.addEventListener('drop', function(e) {
e.preventDefault();
this.classList.remove('highlight');
this.appendChild(aside);
});
</script>
Рекомендации по использованию:
- Добавляйте визуальные подсказки при перетаскивании (изменение курсора, прозрачности)
- Обеспечьте альтернативные способы перемещения для мобильных устройств
- Используйте
tabindex="0"для доступности с клавиатуры - Тестируйте на различных устройствах и браузерах
Пример с несколькими перетаскиваемыми элементами:
<style>
.aside-panel {
border: 1px solid #ddd;
margin: 5px;
padding: 10px;
cursor: move;
}
.panels-container {
display: flex;
gap: 10px;
}
</style>
<div class="panels-container">
<aside draggable="true" class="aside-panel" data-panel-id="1">
<h4>Панель 1</h4>
<p>Контент первой панели</p>
</aside>
<aside draggable="true" class="aside-panel" data-panel-id="2">
<h4>Панель 2</h4>
<p>Контент второй панели</p>
</aside>
</div>
<script>
document.querySelectorAll('.aside-panel').forEach(panel => {
panel.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', this.dataset.panelId);
});
panel.addEventListener('dragover', function(e) {
e.preventDefault();
});
panel.addEventListener('drop', function(e) {
e.preventDefault();
const draggedId = e.dataTransfer.getData('text/plain');
const draggedPanel = document.querySelector(`[data-panel-id="${draggedId}"]`);
if (draggedPanel !== this) {
const panels = [...this.parentNode.children];
const draggedIndex = panels.indexOf(draggedPanel);
const targetIndex = panels.indexOf(this);
if (draggedIndex < targetIndex) {
this.parentNode.insertBefore(draggedPanel, this.nextSibling);
} else {
this.parentNode.insertBefore(draggedPanel, this);
}
}
});
});
</script>
Важно: Для сложных сценариев перетаскивания (сортировка списков, сложные макеты) используйте специализированные библиотеки, такие как SortableJS или Draggable.
Доступность:
- Добавьте ARIA-атрибуты (
aria-grabbed,aria-dropeffect) - Обеспечьте клавиатурное управление
- Добавьте текстовые подсказки для скринридеров
- Учитывайте контрастность в разных состояниях
Пример доступного перетаскивания:
<aside
draggable="true"
tabindex="0"
aria-grabbed="false"
aria-label="Перетаскиваемая боковая панель"
role="article"
>
<h3>Доступная панель</h3>
<p>Можно перетаскивать мышью или управлять с клавиатуры</p>
</aside>
<script>
const aside = document.querySelector('aside');
// Обработка клавиш для доступности
aside.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
this.setAttribute('aria-grabbed', 'true');
// Логика для управления с клавиатуры
}
});
</script>
Примечание: Хотя атрибут draggable поддерживается всеми современными браузерами, реализация Drag and Drop API может отличаться. Всегда тестируйте функциональность в целевых браузерах.