js简单的拖拽事件

最新推荐文章于 2023-10-04 11:08:18 发布
最新推荐文章于 2023-10-04 11:08:18 发布
阅读量335 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LLL_liuhui/article/details/80468385
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<style>
			*{margin: 0;padding: 0;}
			#box{width: 120px;height: 120px;border: 1px solid #ccc;background: #F5F5F5;position: fixed;left: 100px;top: 100px;}
		</style>
	</head>

	<body>
		
		<div id="box" ></div>
		<script>
			$(function(){
				var box=document.getElementById('box');
				var isPressed=false; //声明一个标志鼠标是否按下
				var offsetX=0;
				var offsetY=0;
				box.οnmοusedοwn=function(event){
					isPressed=true;
					this.style.cursor="move";
					offsetX=event.offsetX;
					offsetY=event.offsetY;
				}
				box.οnmοuseup=function(){
					isPressed=false;
					this.style.cursor="default";
				}
				box.οnmοusemοve=function(event){
					if(!isPressed){
						return;
					}
					box.style.left=event.clientX-offsetX+'px';
					box.style.top=event.clientY-offsetY+'px';
				}
			})
		</script>				
	</body>

</html>

LLL_LH
关注
专栏目录
js拖拽事件
xhsvwf的博客
06-20 716
首先我们创建一个div标签，给div标签一个id，后面写js时要用到；再在style里面写上它的样式 在浏览器内打开是这个样子 然后就是js部分的内容，我们先声明一个变量 btn 来获取div里面的id，从而绑定之后的事件。 拖拽要用到三个事件，分别为onmousedown，onmousemove,onmouseup。下面是这三个事件的定义和功能 我们先写一个onmousedown的方法，该方法是鼠标按下时才能触发。再在该方法里面获取...
Js中六种拖拽(拉)事件（drag 和 drop）
weixin_46022934的博客
10-17 8876
拖拽事件（待更新） 前言(各个浏览器的兼容性) 1.兼容性如下图： 一、相关的五个事件api如下： 拖拽流程说明： 1.dragstart事件 2.dragenter事件 3.dragover事件 4.drop事件(必须要dragover事件触发) 5.dragend事件 MDN详细说明： 链接如下 如下图所示： 二、相关的属性 1.draggable(让元素可拖拽) draggable解释说明： 使用代码如下： 如下图所示： 2.dataTransfer(对应的拖拽媒介) 解释说明（通用方法）：
js 拖拽事件
weixin_51878863的博客
09-06 96
拖放元素在目标元素上离开时触发（在目标元素上时如果松开鼠标也会触发）。实现简单的拖拽事件（将一个 div 中的内容拖拽到另一个 div ），被拖放的元素在目标元素上同时鼠标放开触发的事件。拖放元素进入目标元素时触发。拖放元素在目标元素上时触发。才会触发drop事件】被拖拽的元素一定要有。在拖拽的过程中触发。
拖拽事件
kennsand的博客
12-21 5372
这里写的是一个原生js实现拖拽的效果，首先： 1、实现拖拽的三大事件，是要首先清楚的 onmousedown （鼠标按下的时候）、onmousemove（鼠标移动的时候）、onmouseup（鼠标松开的时候） 2、给目标元素加上onmousedown时间，记录鼠标按下的时候，鼠标距离所在元素的位置（就是鼠标距离所在元素边界的距离left、top）记录为disX、disY。要注意的是，要移动的
JavaScript鼠标拖拽事件详解
10-15
JavaScript中的鼠标拖拽事件是创建交互式用户界面的重要部分，特别是在网页中移动或操作元素时。在本例中，我们将详细讲解如何实现一个简单的图片拖拽功能，这将涵盖`onmousedown`, `onmousemove`, 和 `onmouseup` ...
javascript实现文件拖拽事件
11-30
在JavaScript中，文件拖放（File Drag and Drop）是一种用户友好的交互方式，它允许用户通过鼠标拖动本地文件到网页元素上，从而上传或处理这些文件。这种功能在现代Web应用中非常常见，比如图片预览、文件上传等...
three.js拖拽生成场景简单示例
09-06
在本文中，我们将深入探讨如何使用three.js库创建一个简单的拖拽生成场景的示例。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得容易。结合OrbitControls.js，我们可以实现对场景中的对象...
threejs画面拖动事件判断
yleave的博客
01-14 2992
文章目录1. 根据相机是否移动来判断是否进行了拖拽2.设置鼠标监听事件小结   前因：想实现一个小功能，有一个参数 lockTiles，当鼠标在屏幕上拖动时，参数 lockTiles 设置为 true，停止拖动时，lockTiles 重设为 false。   思考了一下，这个功能并不难，有两个方向可以实现这个功能： 根据相机是否移动来设置 设置鼠标监听事件，使用 mousedown、mousemove 和 mouseup 来判断是否进行了拖动   不过在对鼠标进行事件监听时遇到了一些坑点。。 1. 根据
javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)
10-28
### JavaScript简单拖拽实现 #### 知识点概述 在Web开发中，拖拽功能是一种常见的交互方式，它能够提供用户更加直观的操作体验。本文将详细介绍如何使用JavaScript结合鼠标事件（`mousedown`、`mousemove`、`...
JS 拖拽事件
本郡主是喵
09-25 1190
4. 将元素拖拽放置在容器中(在容器中松开鼠标),在在容器中绑定一个ondrop 事件中,同样需要调用 e.preventDefault() 方法来阻止默认行为。2.移动鼠标(monusemove),获取移动元素中鼠标的clientX、clientY 减去上边求出的鼠标到元素边界的距离 ,求出元素移动top、left值，赋给元素。下面有2个元素,判断2个元素是否碰撞,如果碰撞的情况非常多，我们可以考虑没碰撞的情况，下面满足任意一种情况就是没碰撞的。3.松开鼠标(monuseup),将鼠标移动事件清除清除。
案例一：javascript的拖拽事件(drag，drop)
weixin_46022934的博客
10-17 4345
一、拖拽效果如下步骤所示 1.正常的排序如下： 2.拖拽列表1与列表2互换位置 常按的效果如下图： 切换位置后的效果如下图： 二、具体代码如下 1.HTML部分代码块 2.javascript部分代码块 3.js代码说明： 总结：下面的🔗是跳转到案例二（关于 表格的拖拽的效果）
js实现拖拽事件
iteye_15700的博客
06-29 367
Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽． 有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select 选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导...
拖拽用到的 js事件
qq_25131799的博客
10-19 1393
1.拖拽用到的 js事件 drag、dragstart、dragend、dragenter、dragover、dragleave、drop 2.代码展示 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &am
JavaScript事件之拖拽事件（详解）
最新发布
fsLees的博客
10-04 721
JavaScript事件之拖拽事件（详解）
js拖拽事件详解
weixin_68658847的博客
11-11 5680
js拖拽事件详解
js拖拽
JetWindLee的专栏
08-17 989
(1)当在拖放对象上点击按钮,并开始移动鼠标时,在拖动对象上触发dragstart事件,默认情况下这个事件是在图像或者被选中的文本上. (2)当拖动时鼠标形状变成不能放置符号(圈圈中有条线).如下图 (3)当鼠标一直拖着不放时一直触发drag事件,类似于mouseover事件,当拖动停止时,触发dragend事件. (4)当鼠标一直拖到可以放置对象的对象a(假设为a,比如text)上面的时候,触发dragenter事件,发生后立即触发dragover事件,如果在可以放置的对象上面则一直触发dragov
JavaScript实现的简单拖拽功能
本章节主要介绍如何使用JavaScript和CSS实现一个简单的拖拽系统，使得元素可以被用户方便地移动。 首先，你需要一个拖拽代码的核心对象`dragDrop`。这个对象包含了处理拖拽行为所需的各种属性和方法。例如，`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值