Custom Slider with GSAP
A custom slider with gsap built with modern frontend techniques for responsive and reusable UI.
Drag & Drop
33 snippetsWelcome to the Drag & Drop resource page — a curated directory for developers. Browse practical UI patterns, specialized libraries, and small interactive demos. Use the table of contents to explore subcategories below.
javascript-drag-drop
Snippets(33)
- Dot Controls: Canvas Grid Interface
A dot controls: canvas grid interface built with modern frontend techniques for responsive and reusable UI.
Drag and Drop State MachineA drag and drop state machine built with modern frontend techniques for responsive and reusable UI.
Image Gallery with GSAP Observer PluginA image gallery with gsap observer plugin built with modern frontend techniques for responsive and reusable UI.
- Interactive Puzzle Game
A interactive puzzle game built with modern frontend techniques for responsive and reusable UI.
Interactive SVG Color WheelA interactive svg color wheel built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13+Features
Color Theory, Drag & Drop, SVG Morphing, Dynamic Theming
Kinetic Brutalism: A 3D Parallax EffectA kinetic brutalism: a 3d parallax effect built with modern frontend techniques for responsive and reusable UI.
- Momentum-Distortion Gallery Slider
A momentum-distortion gallery slider built with modern frontend techniques for responsive and reusable UI.
- Sliding Page with ZIM.js
A sliding page with zim.js built with modern frontend techniques for responsive and reusable UI.
Sliding Puzzle with GSAP Draggable and Tailwind CSSA sliding puzzle with gsap draggable and tailwind css built with modern frontend techniques for responsive and reusable UI.
- The Amazing Stress Ball
A the amazing stress ball built with modern frontend techniques for responsive and reusable UI.
Vertical Full-Screen Slider with 4 ControlsA vertical full-screen slider with 4 controls built with modern frontend techniques for responsive and reusable UI.
- Vertical Warp Slideshow N1
A vertical warp slideshow n1 built with modern frontend techniques for responsive and reusable UI.
- Vertical Zoom Slideshow N3
A vertical zoom slideshow n3 built with modern frontend techniques for responsive and reusable UI.
Solar System DatepickerA solar system datepicker built with modern frontend techniques for responsive and reusable UI.
3D Slider Cards CarouselA 3d slider cards carousel built with modern frontend techniques for responsive and reusable UI.
Carousel with Drag and Wheel InputA carousel with drag and wheel input built with modern frontend techniques for responsive and reusable UI.
- Parallax Photo Carousel
A parallax photo carousel built with modern frontend techniques for responsive and reusable UI.
- Sortable Cards
A sortable cards built with modern frontend techniques for responsive and reusable UI.
Tinder-style Swipeable Card StackA tinder-style swipeable card stack built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Gesture Swiping, Infinite Card Loop, Dynamic Stacking
Interactive Schedule WidgetA interactive schedule widget built with modern frontend techniques for responsive and reusable UI.
- Basic SVG Lighting Effects
A basic svg lighting effects built with modern frontend techniques for responsive and reusable UI.
Interactive Jello Text with Variable FontsA interactive jello text with variable fonts built with modern frontend techniques for responsive and reusable UI.
Scroll-Driven Jigsaw Puzzle AssemblerA scroll-driven jigsaw puzzle assembler built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, Sass, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
Scroll-Driven Animation, Drag-and-Drop Upload, Dynamic Math Calculations, Responsive Layout
Neumorphic Drag Dial ThermostatA neumorphic drag dial thermostat built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Safari 11+, Firefox 55+, Edge 79+Features
Neumorphism, Draggable Dial, Dynamic Gradients, Keyboard Accessible- The Magic of Cascading CSS Counters
A the magic of cascading css counters built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS Counters, JavaScriptDifficulty
IntermediateFeatures
Dynamic numbering, Nested counters, Interactive controls 
Container Query BookstoreA container query bookstore built with modern frontend techniques for responsive and reusable UI.
Features
container queries, responsive designResponsive
Yes
Draggable 3D Cube with Dynamic LightingA draggable 3d cube with dynamic lighting built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 90+, Edge 90+, Safari 14+, Firefox 88+Features
Simulated Lighting, 3D Transforms, Inertia Dragging, Procedural GeometryResponsive
Yes
Draggable 3D Parallax Image RingA draggable 3d parallax image ring built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 90+, Edge 90+, Safari 14+, Firefox 88+Features
3D CSS Transforms, GSAP Draggable, Parallax Backgrounds, Infinite LoopingResponsive
Yes
3D Glass Photo LensA 3d glass photo lens built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
AdvancedBrowser support
Chrome 80+, Edge 80+, Firefox 75+, Safari 13.1+Features
Physically Based Rendering (PBR), Real-time Refraction, Drag & Drop Upload, Procedural GeometryResponsive
Yes
Infinite Scrollable and Draggable WebGL GridA infinite scrollable and draggable webgl grid built with modern frontend techniques for responsive and reusable UI.
Technologies
WebGL, GLSLDifficulty
AdvancedFeatures
Infinite Scrolling, Draggable Interface, Custom Shaders
Draggable Image Track ParallaxA draggable image track parallax built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateBrowser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+Features
Drag and Drop, Internal Parallax, Web Animations API, Touch SupportResponsive
Yes
Drag and DropA drag and drop built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSS, JavaScriptDifficulty
IntermediateFeatures
Drag and drop functionality, Kanban board layout, Visual state updates