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

Dragenter - заход курсора перетаскиваемого на принимающий блок.

"dragenter". Событие dragenter наступает при заходе курсора перетаскиваемого элемента на принимающий блок, когда пользователь перетаскивает элемент или выделенный текст на второй элемент.

Описание dragenter.

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

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

    Метод addEventListener.

    И DragEvent.

    Синтаксис dragenter:

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

    ondragenter = (event) => {};

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

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

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

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

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

    И второй div, в него поместим id, для того, чтобы можно было (обратиться к этому тегу) :

    <div id=new_area> Перетащите сюда. </div>

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

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

    //код

    });

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

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

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

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

    Html:

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

    <div id=new_area> Перетащите сюда. </div>

    Js:

    <script>

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

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

    });

    </script>

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

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

    И перемещайте его на второй "div" - в этот момент сработает "dragenter".

    Нажмите мышку и перетащите...

    Перетащите сюда.

  3. Пример использования ondragenter

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

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

    <div draggable="true">Зажми мышку и перемести меня!</div>
    <div id=new_area2 ondragenter = "myFoo2(event)"> Перетащите сюда. </div>

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

    function myFoo2( event ) {

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

    }

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

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

    Html:

    <div draggable="true">Зажми мышку и перемести меня!</div>

    <div id=new_area2 ondragenter = "myFoo2(event)"> Перетащите сюда. </div>

    Js:

    <script>

    function myFoo2( event ) {

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

    }

    </script>

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

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

И переместите на второй элемент... с надписью "Перетащите сюда."

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

Перетащите сюда.

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

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

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


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

Скоро...


Мои Проекты :

Скоро...



О хостинге :

Скоро...


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