Последние учебники веб-разработки
×

HTML5 Руководство

HTML ГЛАВНАЯ HTML Введение HTML редакторы HTML базовый HTML элементы HTML Атрибуты HTML Заголовки HTML Пункты HTML Стили HTML форматирование HTML цитаты HTML Компьютерный код HTML Комментарии HTML Цвета HTML CSS HTML связи HTML Изображений HTML таблицы HTML Списки HTML Блок и строковые элементы HTML Классы HTML раскладка HTML отзывчивый HTML Iframes HTML JavaScript HTML Глава HTML юридические лица HTML Символы HTML Charset HTML URL шифровать HTML XHTML

HTML формы

HTML формы HTML Форма Элементы HTML Типы входных данных HTML Входные атрибуты

HTML5

HTML5 вступление HTML5 Поддержка HTML5 элементы HTML5 Семантика Миграция HTML5 HTML5 Гид по стилю

HTML Графика

HTML холст HTML SVG

HTML СМИ

HTML СМИ HTML видео HTML аудио HTML Плагины HTML YouTube

HTML APIs

HTML Geolocation HTML Перетаскивания HTML Локальное хранилище HTML App кэш HTML Web Workers HTML SSE

HTML Примеры

HTML Примеры HTML викторина HTML5 викторина HTML Резюме

HTML Рекомендации

HTML Список тегов HTML Атрибуты HTML События HTML холст HTML Аудио Видео HTML DOCTYPEs HTML Цвета HTML Наборы символов HTML URL шифровать HTML Языковые коды HTTP Сообщения HTTP методы PX to EM конвертер Горячие клавиши

HTML5 перетаскивания


Перетаскивание является частью стандарта 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> элементов.