/html/global-attributes/dropzone:> Принцип внесения перемещаемого_
Глобальный атрибут dropzone
Синтаксис
HTML
<[элемент] dropzone="[значение]"> ... </[элемент]>
Описание
Глобальный атрибут / параметр dropzone
(от англ. "dropzone" ‒ «зона высадки/сбрасывания») указывает принцип внесения перемещаемого элемента в элемент с данным атрибутом.
Примечание
Для создания возможности перемещения элемента используется атрибут «draggable
».
Поддержка браузерами
Chrome
Firefox
Opera
Maxthon
IExplorer
Safari
iOS
Android
Спецификация
Верс. | Раздел | |
---|---|---|
HTML | ||
2.0 | ||
3.2 | ||
4.01 | ||
5.0 | ||
5.1 | 5.7.8. The dropzone attribute | Перевод |
XHTML | ||
1.0 | ||
1.1 |
Значения
Значение
- copy
- Указывает web-браузеру, что переносимый элемент должен быть скопирован в принимающий элемент.
- move
- Указывает web-браузеру, что переносимый элемент должен быть перенесён (т.е. удалён из предыдущего места нахождения и создан в месте куда элемент был перенесён) в принимающий элемент.
- link
- Указывает web-браузеру, что в месте куда был перенесён элемент необходимо создать ссылку на местонахождение самого элемента (т.е. на первоисточник).
Тип значения
- string:
- Указывает тип перетаскиваемой строки.
- file:
- Указывает тип перетаскиваемого файла.
Примечание: при указании значения данного атрибута изначально устанавливается одно из значений («copy
», «move
», «link
»), а уже после него устанавливаются допустимые типы значений («string:
», «file:
»).
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Глобальный параметр dropzone</title>
<script type="text/javascript" src="receive.js"></script>
</head>
<body>
<h1>Пример с "dropzone"</h1>
<div style="border: 2px dashed #d8d8d8;" dropzone="copy file:image/png file:image/gif file:image/jpeg" ondrop="receive(event, this)">
<p>Изображение может быть перенесено сюда.</p>
</div>
<img src="http://programmerbook.ru/html/images/dark_clouds.jpg" style="width: 320px; height: 256px" alt="Тёмные облака">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Глобальный параметр dropzone</title>
<script type="text/javascript" src="receive.js"></script>
</head>
<body>
<h1>Пример с "dropzone"</h1>
<div style="border: 2px dashed #d8d8d8;" dropzone="copy file:image/png file:image/gif file:image/jpeg" ondrop="receive(event, this)">
<p>Изображение может быть перенесено сюда.</p>
</div>
<img src="http://programmerbook.ru/html/images/dark_clouds.jpg" style="width: 320px; height: 256px" alt="Тёмные облака">
</body>
</html>
Глобальный параметр dropzone