/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