Атрибут draggable тега <article>
Описание
Атрибут draggable определяет, можно ли перетаскивать элемент <article> с помощью Drag and Drop API. Может принимать значения true (перетаскивание разрешено), false (запрещено) или auto (поведение по умолчанию, обычно равно false).
<article draggable="true" id="draggable-article">
<h2>Перетаскиваемая статья</h2>
<p>Попробуйте перетащить этот элемент</p>
</article>
<script>
document.getElementById('draggable-article').addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', this.id);
console.log('Начато перетаскивание статьи');
});
</script>
Полный пример с зоной сброса:
<style>
#drop-zone {
border: 2px dashed #ccc;
padding: 20px;
margin-top: 20px;
min-height: 100px;
}
.highlight {
border-color: #6c757d;
background-color: #f8f9fa;
}
</style>
<article draggable="true" id="article1">
<h2>Статья 1</h2>
<p>Перетащите меня в зону сброса</p>
</article>
<div id="drop-zone">Зона сброса</div>
<script>
// Обработка начала перетаскивания
document.getElementById('article1').addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', this.id);
this.style.opacity = '0.4';
});
// Обработчики для зоны сброса
const dropZone = document.getElementById('drop-zone');
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');
const id = e.dataTransfer.getData('text/plain');
const article = document.getElementById(id);
this.appendChild(article);
article.style.opacity = '1';
});
</script>
Особенности работы:
| Значение | Описание | События Drag and Drop |
|---|---|---|
true |
Элемент можно перетаскивать | dragstart, drag, dragend |
false |
Элемент нельзя перетаскивать (по умолчанию) | Не генерируются |
auto |
Поведение по умолчанию (обычно как false) | Зависит от браузера |
Рекомендации:
- Важно: Сам по себе
draggable="true"не делает элемент перетаскиваемым - нужны обработчики событий - Для сложных данных используйте
e.dataTransfer.setData()с различными типами - Всегда отменяйте стандартное поведение в событиях
dragoverиdrop - Учитывайте доступность - обеспечивайте альтернативные способы взаимодействия
Пример с несколькими перетаскиваемыми статьями:
<style>
.article-list {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
article {
border: 1px solid #ddd;
padding: 10px;
cursor: grab;
}
article:active {
cursor: grabbing;
}
</style>
<div class="article-list">
<article draggable="true" data-id="1">
<h3>Статья 1</h3>
<p>Контент статьи 1</p>
</article>
<article draggable="true" data-id="2">
<h3>Статья 2</h3>
<p>Контент статьи 2</p>
</article>
</div>
<div id="article-container"></div>
<script>
document.querySelectorAll('article').forEach(article => {
article.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/html', this.outerHTML);
e.dataTransfer.setData('text/plain', this.dataset.id);
});
});
document.getElementById('article-container').addEventListener('dragover', e => e.preventDefault());
document.getElementById('article-container').addEventListener('drop', function(e) {
e.preventDefault();
const html = e.dataTransfer.getData('text/html');
const id = e.dataTransfer.getData('text/plain');
this.innerHTML += html;
console.log(`Добавлена статья с ID: ${id}`);
});
</script>
Важно: Drag and Drop API имеет различия в реализации между браузерами. Всегда тестируйте функциональность во всех целевых браузерах.
Совет: Для сложных сценариев перетаскивания рассмотрите использование специализированных библиотек, таких как Dragula или SortableJS.
Примечание: Хотя перетаскивание статей может быть полезным UI-паттерном, убедитесь, что это соответствует ожиданиям пользователей и не ухудшает UX.
Лучшие практики:
<!-- Хороший пример доступного перетаскивания -->
<article draggable="true" aria-grabbed="false" tabindex="0">
<h2>Доступная статья</h2>
<p>Эту статью можно перетаскивать или перемещать с клавиатуры</p>
</article>
<script>
// Добавляем обработчики клавиатуры для доступности
document.querySelector('article').addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
this.setAttribute('aria-grabbed', 'true');
// Логика для управления с клавиатуры
}
});
</script>