Comment créer un compteur de glisser-déposer en JavaScript

Posté Par: Windows2022tutosur: décembre 29, 2022Dans: TechPas De Commentaires

Comment créer un compteur de glisser-déposer en JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment créer un compteur de glisser-déposer en JavaScript. Ce tutoriel a pour but de vous apprendre à compter un objet avec l’utilisation du glisser-déposer. Cela couvrira toutes les fonctions importantes qui feront glisser et déposer un objet. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.

Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme peut être utilisé sur n’importe quel système si vous souhaitez ajouter un compteur à l’aide de la fonction glisser-déposer. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Glisser-déposer le compteur. Faisons donc le codage.

Avant de commencer :

Ceci est le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code n’affichera que les images et les données du tableau. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Create a Drag and Drop Counter</h3>
		<hr style="border-top:1px dotted #ccc;"/>
			<div class="col-md-6" style="">
				<center>
				<img src="images/image1.png" id="dog" draggable="true" height="70" width="70" ondragstart="drag(event)" />
				<img src="images/image2.png" id="elephant" draggable="true" height="70" width="70" ondragstart="drag(event)" />
				<img src="images/image3.png" id="lion" draggable="true" height="70" width="70" ondragstart="drag(event)" />
				</center>

  


				<center><img src="images/image4.png" style="margin-top:60px;" ondrop="drop(event)" ondragover="dragOver(event)" height="100" width="100"/></center>
				<table class="table table-bordered">

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code comptera l’objet que vous avez déposé à l’emplacement ciblé Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

let dog = ;
let elephant = ;
let lion = ;
 
 
function dragOver(e){
		e.preventDefault();
}
 
function drop(e){
	e.preventDefault();
	let data = e.dataTransfer.getData("data");
 
	switch(data){
		case "dog":
			dog++;
			document.getElementById('dog_count').innerHTML = dog;
		break;
		case "elephant":
			elephant++;
			document.getElementById('elephant_count').innerHTML = elephant;
		break;
		case "lion":
			lion++;
			document.getElementById('lion_count').innerHTML = lion;
		break;
	}
}
 
function drag(e){
	e.dataTransfer.setData("data", e.target.id);
}

Dans la première ligne de code, nous définissons simplement trois variables globales que nous vous demanderons de compter. La première méthode que nous allons créer s’appellera trainer(), cela empêchera le navigateur Web d’autoriser le déplacement d’un objet. Vient ensuite le goutte() , cette fonction recevra les données de l’objet et l’utilisera pour incrémenter un compteur pour chaque objet déposé. Et la dernière méthode est ce que nous appelons glisser() cette méthode reportera les données de l’objet tout en les faisant glisser.

Production:

Le Comment créer un compteur de glisser-déposer en JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment créer un compteur de glisser-déposer en JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici