Create a drag-and-drop interface
Add drag-and-drop reordering
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
Build a drag-and-drop list component in React using the HTML5 Drag and Drop API (no external library). Items should be reorderable, show a visual drop indicator, and emit an onChange callback with the new order. Handle touch events for mobile support.
Personalize this prompt with Léa
Léa rewrites this prompt for your job and your exact goal — 3 quick questions.
Use Cases
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
- LéaAI
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.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Implement CSP with nonces
Prevent XSS with strict CSP
DALL-E Prompt to Generate JavaScript Code
DALL-E, the image generation model developed by OpenAI, is not designed to produce executable JavaScript code. However, it can play a valuable complementary role in a JavaScript developer's workflow. DALL-E excels at creating visuals related to development: user interface mockups, architecture diagrams, data flow schemas, or illustrations to document your code. By crafting precise prompts, you can obtain visual representations of complex JavaScript concepts like closures, the event loop, or design patterns. These visuals then serve as references for implementing your code, creating attractive technical documentation, or designing educational materials. The approach is to use DALL-E as a rapid visual prototyping tool: generate a UI mockup, then translate it into JavaScript components. This method accelerates the design phase and reduces back-and-forth between designers and developers. In this guide, we offer optimized prompts to get the most out of DALL-E in your JavaScript development process, from UI prototyping to visual documentation of your code.
Create a High-Performance Scalable Redis Cache System
A complete prompt to design and implement a Redis cache system with invalidation strategies, error handling and monitoring.
Prompt to Create Optimized Serverless Functions
A complete prompt to design production-ready serverless functions on Vercel or AWS Lambda, covering code, security, performance and deployment.