Код?... Это просто!
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)
Показать еще :

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

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

Описание dragstart.

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

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

    Метод addEventListener.

    И DragEvent.

    Синтаксис dragstart:

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

    ondragstart = (event) => {};

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

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

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

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

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

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

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

    //код

    });

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

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

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

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

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

    Html:

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

    Js:

    <script>

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

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

    });

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

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

    });

    </script>

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

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

    И потом отпустите мышку..

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

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

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

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

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

    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" - зажмите мышкой ниже идущий текст.

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

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

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

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

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


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

Скоро...


Мои Проекты :

Скоро...



О хостинге :

Скоро...


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