Recommander des exemples d'utilisation des éléments glisser-déposer

Ces derniers jours, j'ai travaillé sur une fonction supplémentaire pour faire glisser des éléments, qui consiste à s'aligner sur la grille. En fait, cela signifie déterminer la position initiale de l'élément, puis déplacer l'élément sur une distance fixe. à chaque fois en le faisant glisser. Permet d'aligner les éléments dans la grille. Tout d'abord, je montrerai les rendus, puis j'expliquerai les détails en détail et créerai un gif. Vous pouvez voir que chaque élément se déplace en fonction de la distance unitaire minimale. Et à chaque fois les éléments sont alignés sur la grille. Tout d'abord, j'expliquerai les idées et les détails basés sur la démo, et le code de la démo sera donné plus tard. 1. Déterminez l'unité minimale de chaque mouvement de l'élément (10px et 10px dans la démo), c'est-à-dire que chaque déplacement horizontal ou vertical est de 10px. Poser une couche d'arrière-plan de grille nous aide à mieux voir l'effet (chaque grille de la démo mesure également 10 px * 10 px). 2. Afin de voir l'effet plus clairement, la largeur et la hauteur de l'élément (toutes deux sont des multiples de 10 px) ainsi que la position par défaut (également un multiple de 10 px) sont initialisées. Par exemple : la largeur et la hauteur de l'élément sont 50px * 50px, et la position initiale de l'élément est 0xp * 0px. L'avantage de ceci est que lors du chargement initial, l'élément peut être assuré de couvrir un nombre entier de petites grilles (c'est-à-dire

1. JavaScript implémente le déplacement d'éléments pour s'aligner sur la grille (chaque mouvement Distance fixe)

Introduction : Ces derniers jours, j'ai travaillé sur une fonction supplémentaire pour faire glisser des éléments, qui consiste à s'aligner sur la grille. en fait, il s'agit de déterminer la position initiale de l'élément, puis lorsque vous faites glisser un élément, il se déplace à chaque fois sur une distance fixe afin que les éléments puissent être alignés dans la grille. Tout d'abord, je montrerai le diagramme des effets, puis je le ferai. expliquera les détails en détail et créera un gif. Vous pouvez voir qu'à chaque fois que l'élément se déplace, il se déplace en fonction de la distance unitaire minimale et chaque élément est aligné sur la grille

2. Combat réel HTML5 et analyse de la traînée native (trois objets dataTransfer)

Introduction : Bien que le glisser natif soit implémenté via les événements dragstart, drag et dragend, il s'agit simplement d'un glisser-déposer, mais il existe encore des problèmes de glisser-déposer dans IE6 et IE7, et l'échange de données n'est pas implémenté. Afin de réaliser l'échange de données, IE5 introduit. l'objet dataTransfer. L'objet dataTransfer est un attribut de l'objet événement et est utilisé pour placer l'élément glissé. La cible transfère les données au format chaîne. Parce qu'il s'agit d'une propriété de l'objet événement, l'objet dataTransfer n'est accessible que dans le. gestionnaire d'événements de l'événement glisser-déposer. Dans le gestionnaire d'événements, vous pouvez utiliser les propriétés et les méthodes de cet objet pour terminer le glisser-déposer

3. Effet de copie et d'écriture d'éléments de glissement de souris basé sur jquery_jquery

Introduction : Code d'implémentation pour les éléments de glissement de souris pour copier et écrire des effets basés sur jquery. Les amis qui en ont besoin peuvent s'y référer. .

4. JQuery faisant glisser des éléments pour changer la taille Code_jquery

Introduction : "Élément faisant glisser pour changer la taille. " est en fait le même principe que le "glisser d'éléments". Le prototype du code source est joint ci-dessous. Une fois que vous avez compris le principe, vous pouvez en développer d'autres. Avec une application pratique, l'idée devient beaucoup plus simple et plus claire

5. Effet de plug-in de glissement d'élément Web jquery et mise en œuvre_jquery

Introduction : Description de l'effet : Avec le style CSS existant, après avoir chargé le plug-in, les éléments de la page Web peuvent être glissés et déposés dans la fenêtre à volonté, définissant ainsi l'original. Les options d'effet de translucidité positionnelle et de translucidité de déplacement peuvent être sélectionnées selon les besoins. , lorsqu'il y a plusieurs éléments déplaçables sur la page, vous pouvez charger un autre plug-in pour définir z-index afin de simuler un clic en haut de la fenêtre Windows

6. Étapes de mise en œuvre du plug-in glisser-déposer JS_compétences Javascript

Introduction : l'implémentation du glisser-déposer JS et le plug-in drop est principalement présenté sous six aspects : 1. Le principe du plug-in glisser-déposer js, 2. L'effet le plus basique obtenu sur la base du principe, 3. Abstraction et optimisation du code, 4. , Extension : efficace éléments glisser-déposer, 5. Optimisation et résumé des performances, 6. plug-in jquery , les amis dans le besoin peuvent se référer à

[Recommandations de questions et réponses associées] :

javascript - Pourquoi cette méthode de glisser des éléments écrits en JS fonctionne-t-elle lorsqu'elle est appliquée à plusieurs éléments ?

javascript - Problème d'élément glisser-déposer JS

Implémentation HTML5 du tri par glisser-déposer, quel est le meilleur effet ?

javascript - Le glisser-déposer H5 peut-il modifier l'effet du suivi de la souris ? Comment modifier ?

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!