Comment créer des éléments de traînée et de dépôt avec Javascript Vanilla et HTML

HTML et JavaScript peuvent être combinés pour créer des animations et des effets incroyables et accrocheurs sur la page Web. Il existe des millions de sites Web disponibles sur Internet, et vous ne voulez pas que votre site Web soit oublié au milieu de ces sites Web. L'un des effets les plus simples que vous pouvez donner à un élément sur une page Web est l'effet de glisser-déposer. Pour déplacer et placer un élément à n'importe quel point de la page Web. Dans cet article, nous allons vous montrer comment rendre un élément dragable et droppable sur la page Web.

Élément draggable et droppable avec html et javascript

Créez un nouvel élément HTML et à l'intérieur de la balise corporelle du fichier HTML, créez un nouvel élément DIV avec les lignes de code suivantes:

Traîner et me laisser tomber

Cela créera la page Web suivante:

Pour styliser un peu cet élément, écrivez le code suivant en dehors du étiqueter:

En modifiant ce style, vous obtenez la sortie suivante sur la page Web:

Pour le code de script, créez un nouveau étiquette de script , le javascript nous serons placés à l'intérieur de cette balise de script. Pour la partie javascript, nous allons d'abord créer un nouveau var qui utilisera plus tard la référence de l'élément pour modifier sa position sur la page Web:

var dragvalue;

Ensuite, nous allons créer une fonction nommée déplacer() que nous utiliserons pour déplacer l'élément. La première chose que nous allons faire à l'intérieur de cette fonction de déplacement est d'obtenir la référence de notre élément à l'intérieur d'une variable avec la ligne de code suivante:

var élément = document.getElementById ("draglement");

Non pas que nous ayons notre référence, nous allons définir la position de cet élément à Absolute. Alors que nous déplaçons l'élément avec notre choix, nous voulons le placer exactement où nous voulons, pas par rapport à un autre élément:

élément.style.position = "absolu";

Lorsque nous cliquons sur cet élément, nous voulons passer la référence de notre élément à la "DragValue" variable pour que nous puissions manipuler sa position:

élément.onMoudown = function ()
dragValue = élément;
;

Maintenant, que nous avons la référence de notre élément stocké dans le dragValue variable, nous allons maintenant le placer à l'emplacement de la souris en utilisant les lignes de code suivantes:

document.onMouseMove = fonction (e)
var x = e.pagex;
var y = e.Pagey;
dragValue.style.gauche = x + "px";
dragValue.style.top = y + "px";
;

Lorsque nous libérons le bouton de la souris, nous voulons supprimer la référence de notre élément du «DragValue»Variable:

élément.onMouseUp = function ()
dragValue = null;
;

La dernière étape consiste à invoquer cela déplacer() Fonction avec la ligne de code suivante:

déplacer();

Le code de script complet sera:

Enregistrez le fichier et exécutez le HTML, et vous obtiendrez le résultat suivant sur votre navigateur:

Et voila; Vous avez fait un élément de glisser-déposer dans la vanille javascript

Conclusion

L'un des effets les plus simples que vous pouvez créer à l'aide du JavaScript Vanilla avec HTML est l'élément Draggable et Droppable sur votre page Web. Parmi les millions de sites Web, vous voulez que votre page Web se démarque. Pour cela, la page Web doit être super attrayante et interactive. Il existe plusieurs façons de faire un effet ou une animation particulière grâce aux quantités toujours croissantes de bibliothèques JavaScript. Mais aujourd'hui, nous nous sommes concentrés sur la création de quelque chose d'interactif en utilisant la vanille javascript.