ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML5 Tutorial

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

HTML5 Перетаскивание


html5css

Перетащите html5css изображение в прямоугольник.


Перетаскивание

Перетаскивание является очень распространенной функцией. Это когда вы "захватить" объект и перетащить его в другое место.

В HTML5 перетаскивание является частью стандарта: любой элемент можно перетащить.


Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает перетаскивание.

API
Перетаскивание 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 значение true:

<img draggable="true">

Что бы перетащить - ondragstart и SetData()

Затем укажите, что должно произойти при перетаскивании элемента.

В приведенном выше примере атрибут ondragstart вызывает функцию, перетаскивание (событие), указывающее, какие данные следует перетащить.

Метод dataTransfer.setData() задает тип данных и значение перетаскивания данных:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

In this case, the data type is "text" and the value is the id of the draggable element ("drag1").


Куда отказаться - ondragover

Событие ondragover указывает, куда можно удалить перетаскивание данных.

По умолчанию данные/элементы не могут быть удалены в других элементах. Чтобы разрешить перетаскивание, мы должны запретить обработку элемента по умолчанию.

Это делается путем вызова метода event.preventDefault() для события ondragover:

event.preventDefault()

Када отпустить - OnDrop

Когда перетаскивание данных удаляется, происходит событие Drop.

В приведенном выше примере атрибут OnDrop вызывает функцию, Drop (событие):

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Как работает код:

  • CallpreventDefault(), чтобы запретить браузер по умолчанию обработки данных (по умолчанию открыта как ссылка на падение)
  • Получите перенесенные данные с помощью метода Data Transfer.GetData(). Этот метод возвращает все данные, которые были установлены в один и тот же тип в методе SetData()
  • Перетаскивание данных является идентификатором перетаскивания элемента ("drag")
  • Добавление перетаскивания элемента в элемент перетаскивания

Другие примеры

Перетаскивание изображения вперед и назад

Как перетащить (отпустить) изображения вперед и назад между двумя <div> элементы: