Атрибут draggable тега <b>
Описание
Атрибут draggable определяет, можно ли перетаскивать текстовое содержимое элемента <b>. По умолчанию обычный текст уже можно выделять и перетаскивать, но атрибут дает более точный контроль.
<p>
Попробуйте перетащить <b draggable="true">этот текст</b> в другое приложение.
</p>
Значения атрибута:
| Значение | Поведение | По умолчанию |
|---|---|---|
true |
Разрешает перетаскивание | |
false |
Запрещает перетаскивание | ✓ |
auto |
Поведение по умолчанию браузера |
Особенности работы:
- Без JavaScript имеет ограниченную полезность
- Влияет только на сам элемент
<b>, не на дочерние - Для изображений внутри
<b>работает отдельно - Может конфликтовать с выделением текста
<style>
[draggable="true"] {
cursor: grab;
user-select: none;
}
[draggable="true"]:active {
cursor: grabbing;
}
#drop-zone {
border: 2px dashed #ccc;
padding: 1rem;
margin-top: 1rem;
}
#drop-zone.drag-over {
background-color: #f0f8ff;
border-color: #3a86ff;
}
</style>
<b
draggable="true"
id="draggable-text"
data-content="Важный текст для переноса"
>
Перетащите меня
</b>
<div id="drop-zone">Зона для вставки</div>
<script>
const textElement = document.getElementById('draggable-text');
textElement.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', textElement.dataset.content);
e.dataTransfer.effectAllowed = 'copy';
});
document.getElementById('drop-zone').addEventListener('drop', (e) => {
e.preventDefault();
const text = e.dataTransfer.getData('text/plain');
e.target.textContent = `Получено: ${text}`;
});
</script>
Рекомендации:
- Используйте с
user-select: noneдля лучшего UX - Всегда обрабатывайте события
dragoverиdrop - Предусматривайте визуальную обратную связь
- Для сложных сценариев используйте библиотеки (Dragula, SortableJS)
Ограничения: На мобильных устройствах требуется обработка touch-событий вместо drag-and-drop API.
Определение поддержки:
const isDraggableSupported = 'draggable' in document.createElement('b');
console.log('Поддержка draggable:', isDraggableSupported);
Совет: Для перетаскивания фрагментов текста внутри документа лучше использовать document.execCommand или Selection API.
Примечание: Хотя атрибут draggable поддерживается всеми современными браузерами, его поведение может отличаться для разных типов контента.