首页> 基础笔记 >JS/JQ基础学习 >经典案例 经典案例
JavaScript实例：实现拖拽元素功能
作者：小萝卜 2023-03-22 【 javascript 】 浏览 646
简介JavaScript实例：实现拖拽元素特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖动div</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#move{width:200px;height:200px;background:orange;position:absolute;}
</style>
</head>
<body>
<div id="move" ></div>
<script type="text/javascript">
//声明全局变量
var x = 0;
var y = 0;
var _left = 0;
var _top = 0;
var isDown = false;//检测当前鼠标是否按下
//获取元素
var move = document.getElementById('move');
//鼠标按下事件
move.onmousedown = function(e){
//鼠标的偏移量
x = e.clientX;
y = e.clientY;
//获取当前div的偏移量
_left = move.offsetLeft;
_top = move.offsetTop;
//修改检测变量的值
isDown = true;
//修改鼠标样式
move.style.cursor = "move";
move.style.background = "red";
}
//鼠标移动事件
window.onmousemove = function(e){
//判断检测变量
if(!isDown) return;
//获得鼠标移动之后的偏移
var newX = e.clientX;
var newY = e.clientY;
//计算新的left和top属性
var newLeft = newX - (x-_left);
var newTop = newY-(y-_top);
//设置css样式 新的top和left样式
move.style.left = newLeft + 'px';
move.style.top = newTop + 'px';
}
//鼠标的抬起事件
move.onmouseup = function(){
//修改检测变量的值
isDown = false;
//修改鼠标样式
move.style.cursor = "default";
move.style.background = "orange";
}
//作业: div拖动和键盘按键一起移动div
</script>
</body>
</html>
很赞哦！ (0)
