Безплатно! Онлайн събитие: 5-дневно ChatGPT предизвикателство Регистрация тук.

Drag and Drop

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

Предишен Следващ

Основи на програмирането с JavaScript В курса ще се научите как да пишете код с помощта на един от най-популярните програмни езици - JavaScript. Този курс е идеален за напълно начинаещи и ще ви помогне да разберете основите на програмирането, както и как да създавате интерактивни уеб приложения. Ще придобиете фундаментални умения, които ще ви позволят да създавате динамични уеб сайтове и да поставите основите си за развитие в областта на софтуерното програмиране.

Как работи Drag and Drop с мишката

За да направите елемент „влачен“ по екрана, трябва да комбинирате събитията на мишката и динамична промяна на CSS позицията. Най-важното е: при натискане на бутона активирате следене на движението, при движение обновявате координатите, а при отпускане спирате слушателите. Така елементът следва курсора и остава на последната позиция.

Стъпка по стъпка: реализиране на влачене

Клонирайте елемент с cloneNode() и го добавете в body.
Задайте му стилове: position: absolute, left: 0, top: 0, подходящ z-index и фон.
Добавете mousedown listener към елемента.
В обработчика извикайте event.preventDefault(), за да спрете селектирането на текста.
При mousedown добавете към window слушатели за mousemove и mouseup.
В mousemove използвайте event.pageX и event.pageY, за да зададете нови стойности на style.left и style.top (добавете 'px').
В mouseup премахнете mousemove и mouseup listener-ите от window.

Основни събития и методи

mousedown – активира процеса на влачене при натискане на бутон на мишката.
mousemove – извиква се при всяко движение на мишката.
mouseup – спира влаченето при отпускане на бутона.
event.preventDefault() – спира стандартното поведение (напр. селектиране на текст).
event.pageX / event.pageY – връщат координатите на мишката спрямо страницата.

Дискусия към урока