Перетаскивание является частью стандарта HTML5.
Перетащите изображение сверху в прямоугольник.
В HTML
HTML5 рабочий проект спецификации включает поддержку перетаскивания и падения. HTML5 поддерживает различные виды перетаскивания функций, включая:
- Перетаскивание текста и HTML-коды
- Перетаскивание HTML элементы
- Перетащите и файлы падение
На основе необходимых действий, один из указанных выше типов могут быть использованы. Следует отметить, что, когда HTML-элемент перетаскивается для перемещения его текущее положение, его идентификатор отправляется в родительский элемент назначения; поэтому он посылает текст и может рассматриваться в качестве первой группы.
Веб-приложение электронной почты Google, Gmail поддерживает перетащить и падение изображений и вложений в последней версии браузера Google Chrome и Safari от Apple (5.x). И поиск Google Image поддерживает перетащить & падение.
Перетаскивание
Перетащите и падение является очень распространенной особенностью. Это когда вы "grab" объект и перетащить его в другое место.
В HTML5, перетаскивание является частью стандарта, и любой элемент может быть перетаскивать.
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает перетаскивание.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4,0 | 9,0 | 3,5 | 6,0 | 12,0 |
HTML Перетащите и пример падения
В приведенном ниже примере простой перетащить пример:
пример
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html> Попробуй сам " Это может показаться сложным, но позволяет пройти через все разные части перетаскивания события.
Сделать Элемент Draggable
Прежде всего: Для того, чтобы элемент перетаскиваемого, установите draggable атрибут true :
<img draggable="true">
Что Drag - ondragstart и setData()
Затем укажите, что должно произойти, когда элемент перетаскивается.
В приведенном выше примере, ondragstart атрибут вызывает функцию drag(event) , который определяет , какие данные тащиться.
dataTransfer. setData() dataTransfer. setData() метод устанавливает тип данных и значение перемещенных данных:
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
В этом случае типа данных "text" , а значение представляет собой идентификатор перетаскиваемого элемента ("drag1") .
Где падение - ondragover
ondragover событие указывает , где тянулись данные могут быть удалены.
По умолчанию данные / элементы не могут быть удалены в других элементах. Чтобы разрешить падение, мы должны предотвратить обработку по умолчанию элемента.
Это делается путем вызова event. preventDefault() event. preventDefault() метод ondragover события:
event . preventDefault()
Делают Drop - OnDrop
Когда тащили данные отбрасываются, происходит событие падения.
В приведенном выше примере, ondrop атрибут вызывает функцию, drop(event) :
function drop(ev) {
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
Код пояснил:
- Вызов preventDefault() , чтобы предотвратить обращение с браузером по умолчанию данных (default is open as link on drop) по (default is open as link on drop) в (default is open as link on drop)
- Получить перетаскиваемых данные с dataTransfer. getData() dataTransfer. getData() метод. Этот метод будет возвращать какую - либо данные , которые были установлены на тот же тип в setData() метод
- Вытащили данные идентификатор перемещенного элемента ("drag1")
- Append перетаскиваемого элемента в drop элемент
Перетащите изображение назад и вперед
Как перетащить (and drop) изображение назад и вперед между двумя <div> элементов.