В примере в этой статье представлен конкретный код для реализации эффекта перетаскивания мышью в JavaScript. Конкретное содержимое
на этот раз выглядит следующим образом:
Я думаю, что сложность этого эксперимента заключается в том, чтобы сохранить неизменным относительное положение поля и мыши. Как добиться эффекта перетаскивания, нажимая и перемещая мышь
?
Нам нужно использовать три функции: onmousedown , onmousemove и onmouseup , которые соответственно представляют нажатие, перемещение мыши и подъем мыши.
В функции обратного вызова нажатия мыши нам нужно получить начальное положение мыши через clientX и clientY . и через offsetLeft и offsetTop получает начальное положение поля, а затем вычисляет разницу между начальным положением мыши и начальным положением поля
в функции обратного вызова движения мыши , нам нужно получить текущую позицию; поле на основе разницы между положением мыши и ранее рассчитанным положением, а затем измените его левое и верхнее значения, не забудьте установить абсолютное положение (потому что я просто забыл...)
В функции обратного вызова mouselift , нам нужно очистить движение мыши и подъем мыши, установив для значений onmousemove и onmouseup значение null. Также
обратите внимание! ! !
И функция перемещения мыши, и функция подъема мыши должны быть записаны в функции нажатия мыши, потому что нам нужно спроектировать последующее поведение после действия нажатия мыши, и очень важный момент:
функция нажатия мыши — это p, а мышь Перемещение и поднятие мыши включены в документ,
потому что мы подразумеваем, что мышь перемещается не по букве p, а по всей странице.
Ключевые моменты, вероятно, следующие:
<!DOCTYPE html>.
<html>
<голова>
<мета-кодировка="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, Initial-scale=1.0">
<title>Документ</title>
<стиль>
#коробка{
ширина: 100 пикселей;
высота: 100 пикселей;
цвет фона: аквамарин;
радиус границы: 14 пикселей;
box-shadow: 2px 2px 6px rgba(0,0,0,.3);
/* Хорошие парни хотят двигаться и менять положение влево, не задавая позиционирование. . . */
позиция: абсолютная;
}
</стиль>
</голова>
<тело>
<div id="box"></div>
<скрипт>
let box=document.getElementById("коробка");
box.onmousedown=функция(событие){
пусть disx=event.clientX-box.offsetLeft;
let disy=event.clientY-box.offsetTop;
//Это не box.onmousemove, а document.onmousemove
document.onmousemove=функция(событие){
box.style.left=event.clientX-disx+'px';
box.style.top=event.clientY-disy+'px';
}
//Написано в omniusedown document.onmouseup=function(){
//Обе из них должны быть установлены на ноль
document.onmousemove = null;
document.onmouseup=null;
вернуть ложь;
}
}
</скрипт>
</тело>
</html> Рекомендации по теме: [Видеоруководство по JavaScript]
Выше представлено подробное содержимое js для имитации событий перетаскивания мышью (с примерами изображений и текста). Для получения дополнительной информации обратите внимание на другие соответствующие статьи на китайском веб-сайте PHP. !
