/html/global-attributes/draggable:> Перетаскивание элемента_
Глобальный атрибут draggable
Синтаксис
HTML
<[элемент] draggable="[значение]"> ... </[элемент]>
Описание
Глобальный атрибут / параметр draggable (от англ. "draggable" ‒ «перетаскивать») устанавливает возможность перетаскивания элемента. Сам же процесс перетаскивания организуется при помощи скриптов.
Примечание
Возможность перетаскивания по умолчанию имеют элементы a, img, object, а так же выделенный текст.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Android
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | ||
| 3.2 | ||
| 4.01 | ||
| 5.0 | ||
| 5.1 | 5.7.7. The draggable attribute | Перевод |
| XHTML | ||
| 1.0 | ||
| 1.1 | ||
Значения
- auto
- Использует поведение web-браузера по умолчанию.
- false
- Указывает web-браузеру, что данный элемент запрещено перетаскивать.
- true
- Указывает web-браузеру, что данный элемент можно перетаскивать.
Значение по умолчанию: «auto».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Глобальный параметр draggable</title>
<link type="text/css" href="exstyle.css" rel="stylesheet">
<script type="text/javascript" src="draggable.js"></script>
</head>
<body>
<h1>Пример с "draggable"</h1>
<p>Распределите названия цветов по блокам с соответствующим цветом.</p>
<ol ondragstart="dragStartHandler(event)">
<li draggable="true" id="li1" ondragstart="fdraggable(event)">Красный</li>
<li draggable="true" id="li2" ondragstart="fdraggable(event)">Синий</li>
<li draggable="true" id="li3" ondragstart="fdraggable(event)">Зелёный</li>
</ol>
<div class="box red" ondrop="fdrop1(event)" ondragover="fdrop2(event)"></div>
<div class="box green" ondrop="fdrop1(event)" ondragover="fdrop2(event)"></div>
<div class="box blue" ondrop="fdrop1(event)" ondragover="fdrop2(event)"></div>
<br>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Глобальный параметр draggable</title>
<link type="text/css" href="exstyle.css" rel="stylesheet">
<script type="text/javascript" src="draggable.js"></script>
</head>
<body>
<h1>Пример с "draggable"</h1>
<p>Распределите названия цветов по блокам с соответствующим цветом.</p>
<ol ondragstart="dragStartHandler(event)">
<li draggable="true" id="li1" ondragstart="fdraggable(event)">Красный</li>
<li draggable="true" id="li2" ondragstart="fdraggable(event)">Синий</li>
<li draggable="true" id="li3" ondragstart="fdraggable(event)">Зелёный</li>
</ol>
<div class="box red" ondrop="fdrop1(event)" ondragover="fdrop2(event)"></div>
<div class="box green" ondrop="fdrop1(event)" ondragover="fdrop2(event)"></div>
<div class="box blue" ondrop="fdrop1(event)" ondragover="fdrop2(event)"></div>
<br>
</body>
</html>
Глобальный параметр draggable