В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 13-07-2024! ×
Меню :
js events (21)
js (269)



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

    Нажмите мышку и перетащите за пределы блока..
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

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

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

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