简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

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

不言
Lepaskan： 2018-08-15 17:33:50
asal
1462 orang telah melayarinya

本篇文章给大家带来的内容是关于原生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>
Salin selepas log masuk

相关推荐：

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

js简单的表拖拽_javascript技巧

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

Atas ialah kandungan terperinci 原生js如何实现拖拽事件（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
拖拽
sumber：php.cn
Artikel sebelumnya：js事件委托是什么？javascript事件委托的介绍 Artikel seterusnya：js时间相互转换：时间戳转为时间字符串（代码）
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Dapatkan koordinat x dan y pemilih video untuk mengubah saiz dan seret berdasarkan peleraian video Saya menggunakan @use-gesture/react dan @react-spring/web untuk membuat tindanan pemilih y...
daripada 2023-09-19 10:00:05
0
1
238
Cara untuk melumpuhkan penyeretan acara dalam FullCalendar untuk melaraskan tempoh Hai, saya menggunakan kalendar penuh Angular dan saya mahu menjadikannya supaya apabila pe...
daripada 2023-09-15 12:40:23
0
1
266
Buat garisan sfera boleh seret dalam React JS Saya mempunyai video bola yang boleh diseret dalam talian. Saya perlu melaksanakan fungsi ...
daripada 2023-09-07 12:26:10
0
1
192
Cara menambah butang dengan jidar kecerunan pada tapak web anda Masalah saya ialah butang itu kelihatan sangat kecil dan saya melaraskan ketinggian atau l...
daripada 2023-09-05 20:41:10
0
1
282
Bahan Sudut - Alihkan elemen ke lokasi baharu Saya memerlukan bantuan dengan seret dan lepas bahan Sudut Ideanya ialah saya boleh mengge...
daripada 2023-09-01 09:12:46
0
1
181
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！