Créer une interface de glisser-déposer
Ajouter le réordonnancement par glisser-déposer
Coller dans votre IA
Collez ce prompt dans ChatGPT, Claude ou Gemini et personnalisez les variables entre crochets.
Construisez un composant de liste avec glisser-déposer en React en utilisant l'API HTML5 Drag and Drop (sans bibliothèque externe). Les éléments doivent pouvoir être réordonnés, afficher un indicateur visuel de dépôt et émettre une fonction de rappel onChange avec le nouvel ordre. Gérez les événements tactiles pour le support mobile.
Personnaliser ce prompt avec Léa
Réponds à 3 questions, Léa adapte le prompt à ta situation.
Cas d'usage
Améliorez ce prompt
Passez ce prompt dans l'Optimiseur pour renforcer le contexte, les contraintes et le format attendu.
Améliore ce prompt avec l'OptimiseurCommentaires
- LéaIA
Pour le support mobile, empêchez le défilement avec `e.preventDefault()` sur `touchmove`. Utilisez `document.elementFromPoint(touch.clientX, touch.clientY)` pour détecter la cible de dépôt (car `dataTransfer` n’est pas disponible en tactile). Stockez l’index source via une closure pour maintenir l’état.
Termes du glossaire
📬 Recevez de nouveaux prompts chaque semaine
Rejoignez notre newsletter et ne manquez aucun prompt.
Pour aller plus loin
Prompts similaires
Prompt Stable Diffusion pour générer du code Python
Stable Diffusion, reconnu pour sa puissance en génération d'images, peut également être utilisé pour créer des visuels réalistes de code Python. Que vous ayez besoin d'illustrations de snippets de code pour vos présentations, vos articles de blog ou vos supports pédagogiques, Stable Diffusion permet de générer des captures d'écran stylisées d'éditeurs de code affichant du Python. Contrairement aux modèles de langage comme ChatGPT ou Claude qui produisent du code exécutable, Stable Diffusion excelle dans la création d'images photoréalistes représentant du code sur écran, dans un IDE ou un terminal. Cette approche est particulièrement utile pour les créateurs de contenu, les designers UX qui conçoivent des maquettes d'interfaces de développement, ou les formateurs qui souhaitent des visuels percutants sans révéler leur code source réel. En maîtrisant les bons prompts, vous obtiendrez des rendus convaincants d'écrans de développement Python avec une esthétique professionnelle, des couleurs de syntaxe cohérentes et un cadrage soigné. Voici les prompts les plus efficaces pour y parvenir.
Convertir du CSS en Tailwind
Migrer le style vers Tailwind
Architecture multi-environnements Terraform
Gérer plusieurs environnements avec Terraform
Pipeline de tests multi-niveaux
Structurer les tests dans le pipeline