js拖拽div的例子

当需要在网页中实现拖拽功能时，可以使用JavaScript来实现。下面是一个简单的例子，演示如何实现拖拽一个 <div> 元素：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Div Example</title>
<style>#draggable {width: 200px;height: 200px;background-color: #f1f1f1;border: 1px solid #ccc;text-align: center;line-height: 200px;position: absolute;cursor: move; /* 设置鼠标样式为可拖拽 */}
</style>
</head>
<body><div id="draggable">Drag me</div><script>// 获取要拖拽的元素var draggableElement = document.getElementById('draggable');// 鼠标按下时的初始位置var offsetX, offsetY;// 鼠标按下事件处理函数function onMouseDown(e) {// 计算鼠标按下时的偏移量offsetX = e.clientX - draggableElement.getBoundingClientRect().left;offsetY = e.clientY - draggableElement.getBoundingClientRect().top;// 添加鼠标移动和释放事件监听器document.addEventListener('mousemove', onMouseMove);document.addEventListener('mouseup', onMouseUp);}// 鼠标移动事件处理函数function onMouseMove(e) {// 计算元素的新位置var x = e.clientX - offsetX;var y = e.clientY - offsetY;// 设置元素的新位置draggableElement.style.left = x + 'px';draggableElement.style.top = y + 'px';}// 鼠标释放事件处理函数function onMouseUp() {// 移除鼠标移动和释放事件监听器document.removeEventListener('mousemove', onMouseMove);document.removeEventListener('mouseup', onMouseUp);}// 添加鼠标按下事件监听器draggableElement.addEventListener('mousedown', onMouseDown);
</script></body>
</html>

解释说明：

HTML 结构：

在中放置了一个

元素，id 设置为 draggable，作为可拖拽的目标。

CSS 样式：

设置 #draggable 的样式，包括宽度、高度、背景颜色、边框等，并设置 position: absolute; 使其可以自由定位，cursor: move; 设置鼠标样式为可拖拽。

JavaScript 功能：

变量 offsetX 和 offsetY：用于记录鼠标按下时，鼠标相对于元素左上角的偏移量。
事件处理函数 onMouseDown：处理鼠标按下事件，计算初始偏移量，并添加鼠标移动和释放事件的监听器。
事件处理函数 onMouseMove：处理鼠标移动事件，根据鼠标位置调整元素的 left 和 top 属性，实现拖拽效果。
事件处理函数 onMouseUp：处理鼠标释放事件，移除鼠标移动和释放事件的监听器，结束拖拽操作。
事件监听器：在 draggableElement 上添加 mousedown 事件监听器，当鼠标按下时触发 onMouseDown 处理函数，开始拖拽。
这个例子展示了基本的拖拽实现，可以通过修改 CSS 样式和调整 JavaScript 的处理逻辑来满足更复杂的需求，如限制拖拽范围、添加边界检测等功能。

如果要把这个div的拖拽限制在window窗口内的话只需要做些修改就可以了

下面的代码可以把这个div的拖拽限制在窗口内部

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Draggable Div Example</title><style>#draggable {width: 200px;height: 200px;background-color: #f1f1f1;border: 1px solid #ccc;text-align: center;line-height: 200px;position: absolute;cursor: move;/* 设置鼠标样式为可拖拽 */}</style>
</head><body><div id="draggable"></div><script>// 获取要拖拽的元素var draggableElement = document.getElementById('draggable');// 鼠标按下时的初始位置var offsetX, offsetY;// 鼠标按下事件处理函数function onMouseDown(e) {// 计算鼠标按下时的偏移量offsetX = e.clientX - draggableElement.getBoundingClientRect().left;offsetY = e.clientY - draggableElement.getBoundingClientRect().top;// 添加鼠标移动和释放事件监听器document.addEventListener('mousemove', onMouseMove);document.addEventListener('mouseup', onMouseUp);}// 鼠标移动事件处理函数function onMouseMove(e) {// 计算元素的新位置var x = e.clientX - offsetX;var y = e.clientY - offsetY;if (x < 0) {x = 0;};if (x > window.innerWidth - 210) {x = window.innerWidth - 210}if (y < 0) {y = 0;}if (y > window.innerHeight - 210) {y = window.innerHeight - 210}// 设置元素的新位置draggableElement.style.left = x + 'px';draggableElement.style.top = y + 'px';}// 鼠标释放事件处理函数function onMouseUp() {// 移除鼠标移动和释放事件监听器document.removeEventListener('mousemove', onMouseMove);document.removeEventListener('mouseup', onMouseUp);}// 添加鼠标按下事件监听器draggableElement.addEventListener('mousedown', onMouseDown);</script></body></html>