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

23.03.2023 Марат 306 js | drag_drop | js_events |

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

Описание dragleave.

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

Что такое 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);

здесь

Пример использования 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" - зажмите мышкой ниже идущий текст.

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

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

Пример использования 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 -перетащи меня за пределы блока..

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

Нажмите мышку и перетащите за пределы блока..

Не стесняемся говорить спасибо!

Всего комментариев : 0 Comments+ 2.0