Drop - событие броска перетаскиваемого объекта.

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

Описание drop.

1. Что такое drop - синтаксис.
2. Пример использования ondrop.
3. Пример 2 использования ondrop.
4. Пример использования drop + addEventListener.
   
5. Скачать все три варианта "drop" в одном архиве..

Что такое drop - синтаксис.

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

Метод addEventListener.

И DragEvent.

Синтаксис drop:

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

ondrop = (event) => {};

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

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

<element ondrop="myScript">

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

object.ondrop = function(){myScript};

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

object . addEventListener("drop", myScript);




Пример использования ondrop

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

Html:

В первом div(и во всех остальных), располагаем класс, с бордюром, чтобы вы могли увидеть данный блок...

Чтобы начать перетаскивание используем "ondragstart".

ondragstart="drag_start(event)"

Внутри верхнего div располагаем тег p с атрибутом, который указывает, что его можно перетаскивать :

draggable="true"

Второй div с таким же классом, прописываем событие "drop":

ondrop="drag_drop(event)"

+ dragover, с функцией отключения стандартного поведения браузера:

ondragover="allowDrop(event)"

В третий "div" с помощью innerHTML будем отправлять:

Стартовало перемещение/Ты бросил

<div class="the_class" ondragstart="drag_start(event)">

<p draggable="true" id="d_start">Перетащи меня и брось!!</p>

</div>

<div class="the_class" ondrop="drag_drop(event)" ondragover="allowDrop(event)" id="d_end"></div>

<div class="the_class">

<p id="demos"></p>

</div>

Javascript

Ну и далее ... когда захватываем объект мышкой срабатывает первая функция.

В "demos" отправляем "Стартовало перемещение".

В переменную получаем весь блок "абзаца" с draggable="true".

Когда отпускаем... срабатывает:

Вторая функция расположенная во втором "div".

В "demos" отправляем "Ты бросил".

В первом блоке удаляем абзац с помощью outerHTML.

Код использования ondrop

var var_drop;

function drag_start(event) {

demos .innerHTML = "Стартовало перемещение";

var_drop = d_start.outerHTML;

}

function drag_drop(event) {

d_start.outerHTML='';

demos .innerHTML = "Ты бросил";

d_end.innerHTML = var_drop;

}

function allowDrop(event) {

event.preventDefault();

}

Пример использования ondrop

Перетащи меня и брось!!




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

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

Второй синтаксис см. в самом первом пункте.

+ теория из второго пункта...

Алгоритм абсолютно аналогичен, только используется конструкция вот такого типа:

drag_start_1.ondragstart = function(event) {

demos_1.innerHTML = "Стартовало перемещение";

var_drop = d_start_1.outerHTML;

};

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

Чтобы проверить работоспособность кода с "drop" - внизу расположен пример, захватите мышкой "Перетащи меня и брось!!" и перетащите во второй блок...

Перетащи меня и брось!!

Скачать код использования drop №2

Скачать все три варианта в одном архиве.




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

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

Третий синтаксис см. в самом первом пункте.

+ теория из второго пункта...

Алгоритм абсолютно аналогичен, только используется в коде addEventListener:

drag_start_2.addEventListener("dragstart", (event) => {

demos_2.innerHTML = "Стартовало перемещение";

var_drop = d_start_2.outerHTML;

});

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

Чтобы проверить работоспособность кода с "drop" - внизу расположен пример, захватите мышкой "Перетащи меня и брось!!" и перетащите во второй блок...

Перетащи меня и брось!!

Скачать код использования drop №3

Скачать все три варианта в одном архиве.




Скачать все три варианта "drop" в одном архиве.

Скачать код drop в js здесь.

Что в архиве "drop"?

В архиве выше приведенные 3 варианта кода "drop js".