Comment remplacer dynamiquement un devis en le faisant glisser en JavaScript

Posté Par: Windows2022tutosur: janvier 13, 2023Dans: TechPas De Commentaires

Comment remplacer dynamiquement un devis en le faisant glisser en JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment remplacer dynamiquement un devis en le faisant glisser en JavaScript. L’objectif de ce didacticiel est de vous permettre de remplacer les guillemets que vous souhaitez en les faisant glisser. Cela couvrira toutes les fonctions de base qui permettront de rechercher une liste. 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é pour n’importe quelle application si vous souhaitez disposer d’une fonctionnalité interactive permettant de faire glisser des éléments. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Remplacer la citation en faisant glisser. 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 comportera plusieurs guillemets et boutons 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 Replace Quote Dynamically by Dragging in JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<a href="index.html" class="btn btn-success pull-left"><span class="glyphicon glyphicon-refresh"></span> Reset</a>&nbsp;<button type="button" class="btn btn-primary" onclick="submitQuote();">Submit</button>
		<div id="my-quote" class="col-md-6" style="border:1px SOLID #ccc; height:100px;" ondrop="drop(event)" ondragover="dragOver(event)">“If you’re going through hell, keep going.”</div>
 

  


			<div class="alert alert-success" draggable="true" ondragstart="drag(event)" id="word1">“Don’t let yesterday take up too much of today.”</div>
			<div class="alert alert-success" draggable="true" ondragstart="drag(event)" id="word2">“Every man dies. Not every man lives.”</div>
			<div class="alert alert-success" draggable="true" ondragstart="drag(event)" id="word3">“Life shrinks or expands in proportion to one’s courage.”</div>
			<div class="alert alert-success" draggable="true" ondragstart="drag(event)" id="word4">“Nothing is impossible. The word itself says “I’m possible!”</div>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code remplacera dynamiquement votre devis en le faisant glisser vers la zone de dépôt. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

function dragOver(e){
	e.preventDefault();
}
 
function drop(e){
	e.preventDefault();
	let data=e.dataTransfer.getData("data");
	let word=document.getElementById(data).innerHTML;
	e.target.innerHTML = word;	
}
 
function drag(e){
	e.dataTransfer.setData("data", e.target.id);
}
 
function submitQuote(){
	let myquote=document.getElementById("my-quote").innerHTML;
	alert(myquote);
}

Dans le code ci-dessus, nous créons simplement une méthode appelée trainer(), cette fonction empêchera toute fonction par défaut du navigateur Web. Ensuite, nous allons créer le traîne() méthode, cette fonction reportera les données que vous avez fait glisser. Enfin, nous allons créer le laissez tomber() méthode, cette fonction obtiendra les données de l’élément glissé et les ajoutera dans l’objet div ciblé.

Sortir:

Les Comment remplacer dynamiquement un devis en le faisant glisser 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 remplacer dynamiquement un devis en le faisant glisser 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