Код?... Это просто!
php js Jquery JsPhp blog
ТЕГИ:
js (87)

php (101)
js (87)
php date (19)
html (14)
online (14)
js slice (13)
encode (11)
js array (11)
php array (10)
js date (10)
engine (10)
hash (10)
dosite (9)
info (7)
php img (7)
jsphp (6)
Показать еще :

Dragend - событие окончания перетаскивания.

"dragend". Событие dragend запускается, когда пользователь заканчивает перетаскивание элемента или выделенного текста.

Описание dragend.

  1. Что такое dragend - синтаксис.
  2. Пример использования dragend + addEventListener
  3. Пример использования ondragend
  1. Что такое dragend - синтаксис.

    В синтаксисе "dragend" - используется два варианта:

    Метод addEventListener.

    И DragEvent.

    Синтаксис dragend:

    addEventListener("dragend", (event) => {});

    ondragend = (event) => {};

    Для того, чтобы понять, как работает dragend нам понадобится два примера: где разберем эти два "синтаксиса dragend"

  2. Пример использования dragend + addEventListener

    Для того, чтобы сделать пример с "dragend" вам потребуется:

    Какой-то тег html, пусть это будет div в него поместим id, для того, чтобы можно было обратиться к тегу, также нам понадобится атрибут (draggable) со значением (true),чтобы разрешить перетаскивание элемента - у вас должно получиться так:

    <div id="draggable" draggable="true">Нажмите мышку и перетащите...</div>

    Если вы используете id, то к нему можно обратиться напрямую, к нему добавляем "addEventListener" внутрь помещаем "dragend":

    draggable.addEventListener("dragend", (event) => {

    //код

    });

    Маленькое отступление!

    Для того, чтобы отследить событие "dragend" - окончание пермещения, нам нужно это перемещение начать, поэтому используем ещё и "dragstart" - иначе никак...

    Далее... если перетаскивание кончилось, то, что-то надо сделать, чтобы это увидеть... используем innerHTML для изменения текста на "Вы закончили перетаскивание"

    draggable. innerHTML = "Вы закончили перетаскивание";

    + добавим аналогичный код, но только с "dragstart", чтобы увидеть, когда перетаскивание началось...

    Соберем весь код

    Пример кода с "dragend".

    Html:

    <div id="draggable" draggable="true">Нажмите мышку и перетащите...</div>

    Js:

    <script>

    draggable.addEventListener("dragstart", (event) => {

    draggable. innerHTML = "Вы начали перетаскивание";

    });

    draggable.addEventListener("dragend", (event) => {

    draggable. innerHTML = "Вы закончили перетаскивание" ;

    });

    </script>

    Пример выполнение кода с "dragstart".

    Для того, чтобы увидеть действие "dragend" зажмите ниже идущий текст и попробуйте его перетащить...

    И потом отпустите мышку... - в э иот момент сработает "dragend".

    Нажмите мышку и перетащите...
  3. Пример использования ondragend

    Для того, чтобы сделать пример второго синтаксиса с "ondragend" вам понадобится:

    Почти тоже самое, что и выше рассказанном пунтке, но, только часть "ondragend" - будет размещаться в теге:

    <p draggable="true" ondragstart = "myFoo(event)" ondragend = "myFoo2(event)" id=example>Зажми мышку и перемести меня!</p>

    Пропишем каждую из функций:

    function myFoo( event ) {

    example.innerHTML = "Началось перемещение";

    }

    function myFoo2( event ) {

    example.innerHTML = "Закончилось перемещение";

    }

    Соберем весь код вместе:

    Код примера "ondragend".

    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>

Выполнение Кода примера "ondragend".

Ну и далее, чтобы увидеть действие "ondragend" - зажмите мышкой ниже идущий текст.

И после некоторого перемещения - отпустите мышку...

Зажми мышку и перемести меня!

jsphp.ru есть здесь:
Полезные ссылки:
ruweb
Я писал немного о ruweb.net!
Помочь проекту JsPhp.ru

Что можно сделать!?

Поделиться ссылкой! C друзьями или врагами!


Помочь проекту JSPHP.RU: Помочь проекту JSPHP.RU прокомментировать :

Скоро...


Мои Проекты :

Скоро...



О хостинге :

Скоро...


© jsphp.ru 2023 - 2024 , Аминев Марат. Контакты
Страница загружена за : 0.005127 секунд.