javascript之拖拽（一）

最新推荐文章于 2024-07-30 10:27:19 发布
最新推荐文章于 2024-07-30 10:27:19 发布
阅读量100 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yrhlyyouknow/article/details/107597601
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#box1{
				width:100px;
				height:100px;
				background-color:red;
				position:absolute;
			}
			#box2{
				width:100px;
				height:100px;
				background-color:yellow;
				position:absolute;
				left:200px;
				top:200px;
			}
			</style>
			<script type="text/javascript">
			window.onload=function(){
				/* 拖拽Box1 元素:
				拖拽的流程
				1. 当鼠标在拖拽元素上按下的时候,开始
				拖拽 onmousedown
				2. 当鼠标移动的时候被拖拽的时候被拖拽元素跟随鼠标移动
				onmousemove
				3.当鼠标松开的时候,被拖拽元素固定在当前位置
				onmouseup */
				var box1=document.getElementById("box1");
				box1.onmousedown=function(){
					/* 为box1 绑定一个鼠标按下事件
					当鼠标在被拖拽的元素按下的时候,开始拖拽onmousedown */
					document.onmousemove=function(event){
						event=event||window.event;
						var left=event.clientX;;
						var top=event.clientY;
						//修改box1的位置
						box1.style.left=left+"px";
						box1.style.top=top+"px";
					};
					box1.onmouseup=function(){
						document.onmousemove=null;
						document.onmouseup=null;
					};
					
					
				};
				};
				
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

运行结果：
在这里插入图片描述

youknowml
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现可拖拽的拖动层Div实例
10-23
主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下
JavaScript经典案例之按下拖拽、跟随鼠标移动，真服了
2401_84002630的博客
04-04 722
///记录鼠标状态//要操作的div对象//鼠标按下//获取鼠标按下时坐标//鼠标按下时绑定 鼠标移动和释放事件//鼠标移动//鼠标按下时移动才触发//实时更新div的坐标//获取鼠标移动实时坐标//设置拖动的边界ndx=1;ndy=1;ndx=maxX;ndy=maxY;//把新div坐标值赋给div对象//鼠标释放。
JavaScript 练手小技巧：拖拽事件、把图片拖拽入页面
九天翔龙的技术博客
01-30 3143
HTML5 新增了拖拽事件 drag，利用它可以实现把外部文件拖拽入页面中，可以实现文件的读取，上传等等功能。
JavaScript实现拖拽
weixin_71893790的博客
01-16 795
JavaScript实现拖拽
Javascript实现拖拽效果
qq_61716556的博客
05-09 974
我们执行拖拽操作时， 1.按住某元素 2.移动鼠标 3.移动鼠标到相应位置后松开鼠标 基于以上操作，页面拖拽效果需要三个事件 onmousedown onmousemove onmouseup 在onmousedown事件中，我们需要定义函数表明，该元素被按住，即将进行移动操作，需要计算x坐标值，并触发后续的onmousemove事件。 在onmousemove事件中，我们需要计算元素坐标位置，根据鼠标移动改变元素位置，准备执行鼠标松开时的事件函数。 在onmouseup事件中，我们需要以
【JavaScript 教程】事件——拖拉事件
油墨香^-^的博客
06-08 3962
作者 | 阮一峰 1、拖拉事件的种类 拖拉（drag）指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。 拖拉的对象有好几种，包括元素节点、图片、链接、选中的文字等等。在网页中，除了元素节点默认不可以拖拉，其他（图片、链接、选中的文字）都是可以直接拖拉的。为了让元素节点可拖拉，可以将该节点的draggable属性设为true。 <div draggable="true"> 此区域可拖拉 </div> draggable
javascript之鼠标拖动位置互换效果代码
10-30
javascript之鼠标拖动位置互换效果代码 在本文中，我们将探讨javascript之鼠标拖动位置互换效果代码的实现方法，包括HTML、CSS和JavaScript三方面的内容。 一、HTML结构 在HTML结构中，我们使用div元素来创建容器...
JavaScript 拖拽翻页效果代码
10-29
总结来说，JavaScript拖拽翻页效果结合了事件处理、CSS定位和用户交互设计，为用户提供了一种直观且富有动态感的浏览方式。通过理解和实现这样的功能，开发者可以提升网站或应用的用户体验，使其更具吸引力。
javascript动画之模拟拖拽效果篇
10-21
其实javascript本身是具有原生拖放功能的，但是由于兼容性问题，以及功能实现的方式，用的不是很广泛。javascript动画广泛使用的还是模拟拖拽。本文将详细介绍javascript的模拟拖拽，有需要的可以参考借鉴。
javascript实现完美拖拽效果
10-24
在JavaScript中实现完美的拖拽效果是一项常见的交互设计任务，尤其在开发网页相册或可操作的用户界面时。通过理解和应用基本的DOM操作、事件处理以及位置计算，我们可以创建一个平滑且功能丰富的拖放体验。下面将...
JavaScript可拖动DIV
03-14
NULL 博文链接：https://linshiquan.iteye.com/blog/292086
简易而又灵活的Javascript拖拽框架（一）
08-04
js拖拽的时候，发现了一个强大而又灵活的拖拽框架，（之前用了代码混淆器，还好代码比较短，我就翻译过来了）利用这个框架不仅能实现简单的拖动，更能轻易的实现各种复杂的拖放功能。这一篇先实现最简单的拖拽，稍微复杂的拖放将在后面的文章里写出来。
JS+DIV 实现拖动效果
热门推荐
mixi9760的博客
07-28 1万+
效果图 思路 代码 优化封装以及解决拖动问题事件捕获效果图思路代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="main" style="background-color: aqua;width: 100px;hei
html & js 实现拖动效果
博客
02-14 6437
前言 在日常开发中，前端中常会使用到拖动的效果，今天就来好好的讲解一下，使用javascript和html实现拖动的效果。 需求分析 要实现的效果很简单，如下图中，我们在蓝色区域内拖动可以使得整个灰色和蓝色的也一起拖动，而在灰色的界面内是无法实现拖动的。 javascript 样式很简单，就不多说。 其中的蓝色部分的id是top，而灰色部分的id是main。 window.o...
JavaScript拖拽（一）：简单拖拽
郭宇的博客
05-16 555
JS拖拽 onmousedown事件 onmousemove事件 onmouseup事件 getStyle和offsetLeft、offsetTop
javascript 拖拽功能
青天诀的专栏
12-04 958
拖拽功能是我们经常用到的一个功能，流程如下： 鼠标点击选框时，计算出鼠标位置和选框位置的距离差，也就是disX和disY；鼠标移动，获取鼠标位置坐标，然后减去步骤一种的距离差，就是选框的坐标；鼠标弹起时，清除鼠标移动函数 需要注意以下几点： 鼠标移动时，有可能移出选框的范围，所以需要使用全局的移动函数，也就是document.onmousemove；鼠标弹起时，可能不在选
JavaScript实现鼠标点击拖拽移动
laoli360的博客
09-11 2577
1.CSS首先用通配符清内外边距 然后给自己需要用的盒子加上背景图片及脱标 * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background: url(./images/dog.jpg) round; position: absolute; left: 0;
【分享】前端程序员-技术网站推荐
最新发布
一位前行者的博客
07-30 853
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
用JavaScript实现一个可以拖动的元素
04-01
以下是一个简单的实现可以拖动的元素的 JavaScript 代码： HTML: ```html <div id="myElement">我可以被拖动</div> ``` CSS: ```css #myElement { width: 200px; height: 200px; background-color: blue; color: white; text-align: center; line-height: 200px; cursor: move; } ``` JavaScript: ```javascript // 获取被拖动的元素 var myElement = document.getElementById("myElement"); // 当鼠标按下时，开始拖动 myElement.addEventListener("mousedown", function(event) { // 阻止默认事件，避免选中文字等影响拖动 event.preventDefault(); // 记录鼠标按下位置和被拖动元素的初始位置 var startX = event.clientX; var startY = event.clientY; var initialX = myElement.offsetLeft; var initialY = myElement.offsetTop; // 当鼠标移动时，更新被拖动元素的位置 function move(event) { // 计算鼠标移动距离 var deltaX = event.clientX - startX; var deltaY = event.clientY - startY; // 更新被拖动元素的位置 myElement.style.left = initialX + deltaX + "px"; myElement.style.top = initialY + deltaY + "px"; } // 当鼠标释放时，停止拖动 function stop() { document.removeEventListener("mousemove", move); document.removeEventListener("mouseup", stop); } // 将 move 和 stop 函数绑定到 document 上 document.addEventListener("mousemove", move); document.addEventListener("mouseup", stop); }); ``` 这段代码会让 `myElement` 元素变成一个可以拖动的元素，当鼠标按下时，记录鼠标位置和元素初始位置，然后在鼠标移动时更新元素位置，最后当鼠标释放时停止拖动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值