Войти
Меню :
js events (22)
js (294)



Blog (1573)
php (388)
js (294)
html (151)
css (138)
html tags (62)
js tag (56)
js method (44)
jquery (42)
php array (38)
text (37)
ruweb.net (37)
js date (33)
fonts (30)
form html (30)
online (30)
Показать еще :
other (29)
js events (22)
php file (21)
foto (20)
atom (20)
database (19)
input (19)
forum (18)
php date (18)
svg (18)
lingvo (17)
info (17)
mysql (17)
hosting (17)
php time (16)
php img (16)
dosite (16)
board (16)
color (15)
js time (14)
img (14)
jsphp (14)
js url (14)
html book (13)
notepad (13)
osclass (13)
select (13)
знак (13)
table (13)
yandex (13)
htaccess (13)
download (12)
dw block (12)
php path (12)
keyboard (12)
icon (11)
$ server (11)
vs code (10)
mouse (10)
form (10)
js delete (10)
ftp (9)
chart (8)
hover (8)
comment (7)
php url (7)
php post (7)
php get (6)
hey tag (6)
adminka (6)
нок (6)
list (6)
js vars (6)
canvas (6)
click (6)
iframe (6)
js id (5)
year (5)
tag a (5)
js file (5)
mb (5)
reg.ru (5)
heading (5)
console (5)
js math (5)
value (5)
web (5)
xml (4)
php var (4)
scandir (4)
task (4)
symbols (4)
js form (4)
month (4)
pages (4)
youtube (4)
vk (4)
submit (4)
numbers (4)
base64 (4)
bbcode (4)
day (4)
week (4)
ssl (4)
js hash (4)
games (4)
units (3)
file (3)
рся (3)
video (3)
aimp (3)
captcha (3)
padding (3)
jquery post (3)
ucoz (3)
https (3)
js post (3)
line (3)
куб (3)
money (3)
domen (3)
prompt (2)
seo (2)
counter (2)
height (2)
src (2)
sitemap (2)
tag hr (2)
google (2)
details (2)
js img (2)
typeof (2)
blob (2)
qr code (2)
arrows (2)
cursor (1)
php day (1)
smile (1)
rutube (1)
ok (1)
webp (1)
windows (1)
speed (1)
нод (1)
scroll (1)
lingvo (1)
archive (1)
jino (1)

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

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

Описание dragleave.

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

  1. Что такое dragleave - синтаксис.

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

    Метод addEventListener.

    И DragEvent.

    Синтаксис dragleave:

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

    ondragleave = (event) => {};

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

    Использование dragleave в HTML:

    <element ondragleave="myScript">

    см. здесь

    Использование dragleave в JavaScript:

    object.ondragleave = function(){myScript};

    см. здесь

    Использование dragleave в JavaScript, применяя addEventListener() method:

    object . addEventListener("dragleave", myScript);

    см. здесь

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

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

    Используем :

    div.

    + draggable="true".

    + ondragleave= "myFoo2(event)"

    + id=new_area2

    И получим:

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

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

    Нажми на меня левой кнопкой мыши и перемести меня за пределы блока!

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

    Для того, чтобы использовать второй вариант "ondragleave ":

    object.ondragleave = function(){myScript};

    Вам понадобится:

    Html:

    Используем div в него помещаем id:

    id=new_area3

    + "draggable":

    draggable="true
    Javascript

    Далее кусочек кода javascript:

    new_area3.ondragleave = function(event) {

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

    };

    Соберем весь код использования ondragleave :

    Html :

    <div class="new_kod" id=new_area3 draggable="true">Пункт №2 -перетащи меня за пределы блока.. </div>

    Javascript :

    <script>

    new_area3.ondragleave = function(event) {

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

    };

    </script>

    Пункт №2 -перетащи меня за пределы блока..

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

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

    Используем тег 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" - покидание зажатой мышкой элемента.

    Нажмите мышку и перетащите за пределы блока..
Не стесняемся говорить спасибо!
О комментах : 05.11.2024
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Друзья! Пожалуйста держите себя в рамках приличия!
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже:
Помочь проекту DwWeb.ru

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

Этим вы очень поможете проекту! Заранее огромное спасибо!

На сайте сейчас :
dwweb.ru есть здесь:
Все соцсети в одном месте!
Ещё :Игра "пятнашки"
Угадай страну по флагу
+
Как сделать сайт?
Md5 онлайн
Списки шифрования
Sitemap.html
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Лучший хостинг : RUWEB + помощь по RUWEB Сайт работает круглосуточно 24/7.
Страница загружена за : 0.248773 секунд.