Код?... Это просто!
php js Jquery JsPhp blog
ТЕГИ:
php (100)
js (87)
php date (19)
online (14)
html (14)
js slice (13)
js array (11)
encode (11)
js date (10)
php array (10)
hash (10)
info (7)
dosite (7)
php img (7)
jsphp (6)
Показать еще :

Dragleave - когда перетаскиваемый элемент покидает блок..

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

Описание dragleave.

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

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

    Метод addEventListener.

    И DragEvent.

    Синтаксис dragleave:

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

    ondragleave = (event) => {};

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

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

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

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

    <div class="kod" id=new_area draggable="true">Нажмите мышку и перетащите за пределы блока.. </div>.
    Javascript.

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

    new_area.addEventListener("dragleave ", (event) => {

    //код

    });

    Как только произойдет "dragleave " - нам нужно как-то это увидеть, поэтому используем innerHTML для изменения текста на "Вы вышли за объект"

    new_area . innerHTML = "Вы вышли за объект";

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

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

    Html:

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

    Js:

    <script>

    new_area.addEventListener("dragleave", (event) => {

    new_area. innerHTML = "Вы вышли за объект" ;

    });

    </script>

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

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

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

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

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

    <div id=new_area2 ondragleave= "myFoo2(event)" draggable="true">
    Зажми мышку и перемести меня за пределы блока!
    </div>

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

    function myFoo2( event ) {

    new_area2 .innerHTML = "Вы зашли на объект";

    }

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

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

    Html:

    <div id=new_area2 ondragleave= "myFoo2(event)" draggable="true"> Зажми мышку и перемести меня за пределы блока!</div>

    Js:

    <script>

    function myFoo2( event ) {

    new_area2 .innerHTML = "Вы покинули объект";

    }

    </script>

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

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

И переместите его за пределы блока..."

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

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

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


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

Скоро...


Мои Проекты :

Скоро...



О хостинге :

Скоро...


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