简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

原生js如何实现拖拽事件（代码）

不言
发布： 2018-08-15 17:33:50
原创
1463 人浏览过

本篇文章给大家带来的内容是关于原生js如何实现拖拽事件（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width:200px;
			height:200px;
			background-color: red;
			position: absolute;
			left:0;
			top:0;
		}
	</style>
</head>
<body>
	<p class=&#39;box&#39;></p>
	<script>
		var box = document.querySelector(&#39;.box&#39;);
		box.onmousedown = function(e){
			var event = e || window.event;
			var target = event.target || event.srcElement;
			var disX = event.clientX - target.offsetLeft;
			var disY = event.clientY - target.offsetTop;
			document.onmousemove = function(event){
				// 注意：这里要有自己的事件对象
				target.style.left = event.clientX - disX + &#39;px&#39;;
				target.style.top = event.clientY - disY + &#39;px&#39;;
				document.onmouseup = function(){
					document.onmousedown = null;
					document.onmousemove = null;
				}
			}
		}
	</script>
	
</body>
</html>
登录后复制

相关推荐：

js控制文件拖拽并获取拖拽内容实现代码

js简单的表拖拽_javascript技巧

 原生JS实现拖拽图片效果_javascript技巧

以上是原生js如何实现拖拽事件（代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
拖拽
来源：php.cn
上一篇：js事件委托是什么？javascript事件委托的介绍 下一篇：js时间相互转换：时间戳转为时间字符串（代码）
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
获取视频选择器的x和y坐标，以根据视频分辨率进行调整和拖动 我正在使用@use-gesture/react和@react-spring/web来创建一个可拖动和可调整大小的选择器覆盖在视频上。我还能够获取选择器相对于视频元素的x和y坐标，但...
来自于 2023-09-19 10:00:05
0
1
238
如何在FullCalendar中禁用事件拖动以调整持续时间 您好，我正在使用Angular的完整日历，我想这样做，以便当用户单击日历中的空时间表（这是每周日历，每个日期间隔为15分钟）时，他们可以'按住单击并定义事件的持续时间。不幸的是，c...
来自于 2023-09-15 12:40:23
0
1
266
在React JS中创建可拖动的球体线条 我有一个在线上可拖动球的视频。我必须在reactjs中实现该功能。球可以拖动并越过线松开球杆后，球杆不会回到原来的位置。我尝试了多种代码和方法，但没有一个能按需要工作。我需要帮助来...
来自于 2023-09-07 12:26:10
0
1
192
如何在网站上添加具有渐变边框的按钮 我的问题是按钮显示得非常小，而且我在下面调整高度或宽度没有任何效果。我已经将代码输入到我的WordPress网站中使用Elementor，我只是拖动了一个HTML小部件并粘贴了下面...
来自于 2023-09-05 20:41:10
0
1
282
Angular Material - 移动元素到新位置 我需要有关Angular材质拖放的帮助这个想法是我可以沿着Y轴移动屏幕上的黑色块，为此我使用AngularMaterial拖放，为此我有3个方法onDragMoved、onDrag...
来自于 2023-09-01 09:12:46
0
1
181
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！