ondragstart событие
примеров
Выполнение JavaScript в пользовательском начинается элемент перетягивания <р>, когда:
Попробуйте »
Нижняя часть этой статьи содержит больше примеров.
Определение и использование
ondragstart событие срабатывает, когда пользователь начинает перетаскивать элемент или выделенного текста.
HTML5 перетаскивания является очень распространенной особенностью. Для получения дополнительной информации посетите наш HTML учебник HTML5 перетаскивания .
Примечание: Для того, чтобы элемент перетаскиваемыми, вам нужно использовать HTML5 перетаскиваемыми с собственностью.
Совет: по умолчанию ссылки и изображения имеют обозначения перетаскиваемыми, нет перетаскиваемыми атрибута.
Перетащите процесс вызовет следующие события:
- инициирующее событие (источник элемента) на Drag Target:
- При отпускании целевой триггер события:
- OnDragEnter - Это событие вызывается , когда мышь перетаскивается объект в его пределах контейнера
- OnDragOver - Это событие срабатывает , когда объект перетаскивается перетаскивания объекта контейнера в другом диапазоне
- OnDragLeave - Это событие вызывается , когда мышь оттащили от объекта в пределах диапазона контейнера
- OnDrop - в увлечению, отпустите кнопку мыши , когда вы вызываете это событие
Поддержка браузеров
Примечание: При перемещении элементов, каждые 350 миллисекунд вызывает OnDragOver событие.
событие | |||||
---|---|---|---|---|---|
ondragstart | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
грамматика
В HTML:
В JavaScript:
JavaScript используется метод addEventListener ():
Примечание: 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 атрибут перетаскиваемыми с
объекты событий