КОНСПЕКТ урока

Тема:Перетаскивание объектов.
Для перетаскивания объектов можно использовать различные способы.

Для этого существуют события мыши - щелчок, перемещение и отпускание
мыши, а также можно использовать встроенные возможности браузера и HTML5.
Для того , чтобы элемент можно было перетащить необходимо для него
установить свойство: draggable="true"
Элемент можно переместить и оставить в новом месте, или при его
перемещении возникнет какое-то событие.
Можно реализовать два элемента: который перемещается и тот элемент над
которым возникает перемещаемый элемент, с ним может что-то происходить.
<html>
<head>
<div id="elem1" draggable="true">
asdf
</div>
<style>
#elem1 {
width:100px;
height:100px;
border:3px solid red;
}
</style>
<body>
</body>
</html>
При нажатии на левую кнопку мыши квадрат вместе с надписью перемещается

за мышью.
Чтобы это произошло, необходимо указать для элемента свойство
draggable="true"
При перемещении все действия делятся на две группы – одна группа относится к
элементу, который перемещаем, другая группа будет относится к элементу над
которым находится перемещаемый элемент.
Первая группа:
Использование метода перетаскивания использует три события:
dragStar – начало перетягивания
dragend -окончание перетягивания
drag – во время перетягивания.
Добавим действие для нашего элемента

let elem1 =document.querySelector('#elem1');
elem1.addEventListener('dragend',function(){
this.style.borderColor='green'
consol.log('!');
document.querySelector= это ссылка на объект типа Element, являющийся первым

элементов в документе,
element.addEventListener – метод, который позволяет назначить одному объекту

несколько действий.
This- указывает на элемент, с которым произошло событие.
consol.log('!') – вывод на экран

все эти действия заключаем в
<script>
elem1.addEventListener('dragend',function(){
this.style.borderColor='green'
consolе.log('!');
}
)
</script>
Получаем изменение цвета рамки на зеленый и вывод в консоль
восклицательного знака.
Обратимся ко второй группе действий, которые прописываются для целевого

элемента.
Dragenter – действие происходит при попадании курсора на целевой элемент
Dragleave – при покидании целевого элемента
Ddragover – перемещении над целевым элементом
Drop – отпускание над целевым элементом
Dragenter – перетягиваемый элемент над целевым(курсор) и у целевого

изменяется цвет
<script>
elem2.addEventListener('dragenter',function(){
this.style.borderColor='green';
console.log('!');
});
</script>
Dragleave – изменение происходит, когда объект покинули

<script>
elem2.addEventListener('dragleave',function(){
console.log('!');
});
</script>
Событие dragover – перемещение по целевому элементу
<script>
elem2.addEventListener('dragover',function(){
console.log('!');
});
</script>
Событие drop отпускание над целевым элементом

<script>
elem2.addEventListener('dragover',function(){
event.preventDefault()
});
elem2.addEventListener('drop',function(){
console.log('!');
});
Задание1
На странице устанавливаются рисунок, с помощью мыши переместить его в
любую точку экрана. Положение курсора при этом должно находиться в центре
рисунка.
Задание 2
На странице устанавливаются рисунок и корзина, переместить рисунок в
корзину и он становится невидимым
Задание3
На странице рисунок и он перемещается в ту точку экрана, в которой
произведен щелчок мыши
Для выполнения задания будет полезно воспользоваться

clientX и clientY . - положение указателя мыши относительно верхнего левого угла клиентской области
окна браузера
или
event.pageX – координата Х курсора мыши
event.pageY -координата Y курсора мыши
!!! если создается область, в которую помещен элемент с помощью СSS, то для
размера области используется наименование, его необходимо сохранить и при
использовании скриптов.

КОНСПЕКТ урока

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

КОНСПЕКТ урока

Загружено:

Авторское право:

Доступные форматы

Тема:Перетаскивание объектов.

Для перетаскивания объектов можно использовать различные способы.

При нажатии на левую кнопку мыши квадрат вместе с надписью перемещается

Добавим действие для нашего элемента

document.querySelector= это ссылка на объект типа Element, являющийся первым

element.addEventListener – метод, который позволяет назначить одному объекту

consol.log('!') – вывод на экран

Обратимся ко второй группе действий, которые прописываются для целевого

Dragenter – перетягиваемый элемент над целевым(курсор) и у целевого

Dragleave – изменение происходит, когда объект покинули

Событие drop отпускание над целевым элементом

Для выполнения задания будет полезно воспользоваться

Вам также может понравиться