Maison >interface Web >js tutoriel >Comment implémenter des événements glisser-déposer dans js natif (code)

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

不言original: 2018-08-15 17:33:501576parcourir

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>

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!

JS 事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Qu’est-ce que la délégation d’événements js ? Introduction à la délégation d'événements JavaScriptArticle suivant：Qu’est-ce que la délégation d’événements js ? Introduction à la délégation d'événements JavaScript

Articles Liés

Voir plus