Dragstart - событие начала перетаскивания.
"dragstart". Событие dragstart запускается, когда пользователь начинает перетаскивать элемент или выделенный текст.
Описание dragstart.
- Что такое dragstart - синтаксис.
- Пример использования ondragstart
- Пример 2 использования ondragstart
- Пример использования dragstart + addEventListener
Что такое dragstart - синтаксис.
В синтаксисе "dragstart" - используется два варианта:
Метод addEventListener.
И DragEvent.
Синтаксис dragstart:
addEventListener("dragstart", (event) => {});
ondragstart = (event) => {};
Для того, чтобы понять, как работает dragstart нам понадобится два примера: где разберем эти два "синтаксиса dragstart"
Использование dragstart в HTML:
<element ondragstart="myScript">
Использование dragstart в JavaScript:
object.ondragstart = function(){myScript};
Использование dragstart в JavaScript, применяя addEventListener():
object . addEventListener("dragstart", myScript);
Пример использования ondragstart
Для того, чтобы сделать пример первого синтаксиса с "ondragstart" вам понадобится:
В блок помещаем
Два события прямо в теге:
Используем ondragend, чтобы во время отпуская вы увидели окончание перетаскивая!
Пропишем каждую из функций:
function myFoo( event ) {
example.innerHTML = "Началось перемещение";
}
function myFoo2( event ) {
example.innerHTML = "Закончилось перемещение";
}
Соберем весь код вместе:
Код примера "ondragstart".
Html:
<p draggable="true" ondragstart = "myFoo(event)" ondragend = "myFoo2(event)" id=example>Зажми мышку и перемести меня!</p>
Js:
<script>
function myFoo( event ) {
example.innerHTML = "Началось перемещение";
}
function myFoo2( event ) {
example.innerHTML = "Закончилось перемещение";
}
</script>
Выполнение Кода примера "ondragstart".
Ну и далее, чтобы увидеть действие "ondragstart" - зажмите мышкой ниже идущий текст.
И после некоторого перемещения - отпустите мышку...
Зажми мышку и перемести меня!
Пример 2 использования ondragstart.
Для того, чтобы создать код с "ondragstart" = function вам потребуется:
Два div с индивидуальными "id".
В одном прописываем
Любым способом нужно обратиться к тегу.
И используем innerHTML, чтобы вывести в этот же "div" результат!
+ Используем ondragend, чтобы во время отпуская вы увидели окончание перетаскивая!
new_area_3.ondragstart = function(event) {
new_area_3. innerHTML = '№2 Вы начали перетаскивание';
};
new_area_3.ondragend = function(event) {
new_area_3. innerHTML = '№2 Вы закончили перетаскивание';
};
Соберем весь код использования ondragstart.
Код в сборе использования ondragstart.
Html:
<div draggable="true" id=new_area_3>Нажмите мышку и перетащите...</div>
<div class="kod" id=send_3>Перетащите сюда.</div>
Javascript :
<script>
new_area_3.ondragstart = function(event) {
new_area_3. innerHTML = '№2 Вы начали перетаскивание';
};
new_area_3.ondragend = function(event) {
new_area_3. innerHTML = '№2 Вы закончили перетаскивание';
};
</script>
Пример использования ondragstart.
Для того, чтобы увидеть результат работы "ondragstart" - нажмите мышку по соответствующей надписи и перетащите её в другое поле!
Пример использования dragstart + addEventListener
Для того, чтобы сделать пример с "dragstart " вам потребуется:
Создадим код html с помощью тега div в него помести селектор идентификатора id, также нам понадобится атрибут (draggable) со значением (true),чтобы разрешить перетаскивание элемента - у вас должно получиться так:
Как вы наверное знаете, что если вы используете id, то к нему можно обратиться напрямую, к нему добавляем "addEventListener" внутрь помещаем "dragstart":
+ Используем ondragend, чтобы во время отпуская вы увидели окончание перетаскивая!
draggable.addEventListener("dragstart", (event) => {
//код
});
draggable.addEventListener("dragend", (event) => {
//код
});
Далее... если перетаскивание началось, то, что-то надо сделать, чтобы это увидеть... используем innerHTML для изменения текста на "Вы начали перетаскивание"
+ добавим аналогичный код, но только с dragend, чтобы увидеть, когда перетаскивание кончилось...
Соберем весь код
Пример кода с "dragstart".
Html:
<div id="draggable" draggable="true">Нажмите мышку и перетащите...</div>
Js:
<script>
draggable.addEventListener("dragstart", (event) => {
draggable. innerHTML = "№3 Вы начали перетаскивание";
});
draggable.addEventListener("dragend", (event) => {
draggable. innerHTML = "№3 Вы закончили перетаскивание" ;
});
</script>
Пример выполнение кода с "dragstart".
Для того, чтобы увидеть действие "dragstart" зажмите ниже ижущий текст и попробуйте его перетащить...
И потом отпустите мышку..
Этим вы очень поможете проекту! Заранее огромное спасибо!
