Comment implémenter des événements glisser-déposer dans js natif (code)-js tutoriel-php.cn

Comment implémenter des événements glisser-déposer dans js natif (code)

不言

Libérer： 2018-08-15 17:33:50

original

1462 Les gens l'ont consulté

Le contenu de cet article explique comment implémenter des événements glisser-déposer (code) dans du js natif. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

<!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>

Copier après la connexion

Recommandations associées :

js contrôle le glissement du fichier et obtient le code d'implémentation du contenu du glisser

js est simple Compétences drag_javascript de table

JS natif pour obtenir des compétences de glisser-déposer d'effet d'image_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!