Latest web development tutorials
×

JavaScript & HTML DOM справочное руководство

обзор

JavaScript объекты

JavaScript Array объекты JavaScript Boolean объекты JavaScript Date объекты JavaScript Math объекты JavaScript Number объекты JavaScript String объекты JavaScript RegExp объекты JavaScript Глобальные свойства / функции JavaScript операторы

Browser объекты

Window объекты Navigator объекты Screen объекты History объекты Location объекты

DOM объекты

HTML DOM Document объекты HTML DOM объект Element HTML DOM Атрибут объекта HTML DOM объекты событий

HTML объекты

<a> <area> <audio> <base> <blockquote> <body> <button> <canvas> <col> <colgroup> <datalist> <del> <details> <dialog> <embed> <fieldset> <form> <iframe> <frameset > <img> <ins> <input> - button <input> - checkbox <input> - color <input> - date <input> - datetime <input> - datetime-local <input> - email <input> - file <input> - hidden <input> - image <input> - month <input> - number <input> - range <input> - password <input> - radio <input> - reset <input> - search <input> - submit <input> - text <input> - time <input> - url <input> - week <keygen> <link> <label> <legend> <li> <map> <menu> <menuItem> <meta> <meter> <object> <ol> <optgroup> <option> <param> <progress> <q> <script> <select> <source> <style> <table> <td> <th> <tr> <textarea> <title> <time> <track> <video>

OnDragLeave событие

Событие Ссылка на объект объекты событий

примеров

Выполняется, когда перетаскиваемый элемент из мишени капли JavaScript:

<Div OnDragLeave = "туРипсЫоп (событие)"> </ DIV>

Попробуйте »

Нижняя часть этой статьи содержит больше примеров.


Определение и использование

OnDragLeave событие, когда перетаскиваемый элемент или выбранный текст из исполнения целевой капли триггера.

OnDragEnter и OnDragLeave события могут помочь пользователям лучше понять перетаскиваемости элементы входят и выходят из процесса рабочей зоны. Вы можете установить другой цвет фона, когда перетаскиваемый элемент входит и выходит из зоны падения.

HTML5 перетаскивания является очень распространенной особенностью. Для получения дополнительной информации посетите наш HTML учебник HTML5 перетаскивания .

Примечание: Для того, чтобы элемент перетаскиваемыми, вам нужно использовать HTML5 перетаскиваемыми с собственностью.

Совет: по умолчанию ссылки и изображения имеют обозначения перетаскиваемыми, нет перетаскиваемыми атрибута.

Перетащите процесс вызовет следующие события:

  • инициирующее событие (источник элемента) на Drag Target:
    • ondragstart - срабатывает , когда пользователь начинает перетаскивать элементы
    • ondrag - элемент перетаскивается триггера
    • ondragend - срабатывает после того как пользователь завершает элемент перетаскивания

  • При отпускании целевой триггер события:
    • OnDragEnter - Это событие вызывается , когда мышь перетаскивается объект в его пределах контейнера
    • OnDragOver - Это событие срабатывает , когда объект перетаскивается перетаскивания объекта контейнера в другом диапазоне
    • OnDragLeave - Это событие вызывается, когда мышь оттащили от объекта в пределах диапазона контейнера
    • OnDrop - в увлечению, отпустите кнопку мыши , когда вы вызываете это событие

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

Цифры в таблице представляют первый браузер, чтобы поддержать эту версию событий.

событие
OnDragLeave 4.0 9.0 3.5 6.0 12.0


грамматика

В HTML:

<ЭлементOnDragLeave = "MyScript"> попробовать

В JavaScript:

объект .ondragleave = функция () {MyScript }; попробуйте

JavaScript используется метод addEventListener ():

объект .addEventListener ( "DragLeave", MyScript ); попробуйте

Примечание: Internet Explorer 8 и более ранние версии IE не поддерживают addEventListener () метод.


технические детали
Независимо от того, чтобы поддержать пузырь: да
Это может быть отменено: Нет
Тип события: DragEvent
Поддерживаемые HTML-теги: Все HTML-элементы


примеров

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

примеров

Следующий пример демонстрирует все события перетаскивания:

/ * Когда триггер перетаскивания * /
document.addEventListener ( "dragstart", функция (событие) {
//dataTransfer.setData () метод, чтобы задать тип данных и данные сопротивления
event.dataTransfer.setData ( "Текст", event.target.id);
// Вывод некоторый текст при перемещении элемента р
. Document.getElementById ( "демо") innerHTML = "начните перетаскивание элемента р.";
// Изменение прозрачности элемента сопротивления
event.target.style.opacity = "0.4";
});
// P перетащить элемент в то же время, изменить цвет вывода текста
document.addEventListener ( "перетащить", функция (событие) {
. Document.getElementById ( "демо") style.color = "красный";
});
// Выход End р элемент при перемещении некоторых текстовых элементов и сброса прозрачности
document.addEventListener ( "dragend", функция (событие) {
. Document.getElementById ( "демо") innerHTML = "перетащить элемент полный р";
event.target.style.opacity = "1";
});
/ * После завершения триггера перетаскивания * /
// Завершить элемент сопротивления, когда р ввести DropTarget, стили границ изменить DIV
document.addEventListener ( "DragEnter", функция (событие) {
если (event.target.className == "DropTarget") {
event.target.style.border = "3px пунктирная красный";
}
});
// По умолчанию данные / элементы не могут быть перетянуты в других элементах. При падении Мы должны предотвратить элементы обработки по умолчанию
document.addEventListener ( "DragOver", функция (событие) {
event.preventDefault ();
});
// Когда перетаскивания р-элементов покидают DropTarget, сброс Див стили границ
document.addEventListener ( "DragLeave", функция (событие) {
если (event.target.className == "DropTarget") {
event.target.style.border = "";
}
});
/ * Для получения капли, предотвратить браузер обработка данных по умолчанию (в ссылке падение включена по умолчанию)
Сброс выходной цвет границы и цвет текста в DIV
Используйте dataTransfer.getData () метод, чтобы получить отпущенных данных
Элемент данных Швабра ID ( "drag1")
Дополнительные элементы к элементу перетаскивания * /
document.addEventListener ( "капля", функция (событие) {
event.preventDefault ();
если (event.target.className == "DropTarget") {
document.getElementById ( "демо") style.color = ".";
event.target.style.border = "";
вар данные = event.dataTransfer.getData ( "Текст");
event.target.appendChild (document.getElementById (данные));
}
});

Попробуйте »


Похожие страницы

Учебник HTML: Волок HTML5 и падения

HTML Справочное руководство: HTML атрибут перетаскиваемыми с


Событие Ссылка на объект объекты событий