A simple component for making elements draggable

Related tags

Drag and Drop react component reactjs draggable
Overview

React Draggable Component

A simple component for making elements draggable.

Demo

stackblitz

Installation

$ npm install drag-react
# yarn add drag-react

Example

import { Draggable } from 'drag-react';

<Draggable>
  <div>My element is draggable now</div>
</Draggable>

Props

name type default description
children any empty Component or HTMLElement
className string 'drag-react' class name
style Object { position: 'fixed', left: '10px', top: '10px', zIndex: 99999 , cursor: 'move' } css style

License

MIT

You might also like...
:sparkles: A sortable and resizable pane component for React.
:sparkles: A sortable and resizable pane component for React.

Sortable and resizable pane component for react. Table of Contents Screenshot Live Demo Storybook CodeSandbox Install Usage uncontrolled controlled Pr

bokuweb 616 Dec 19, 2022
Unopinionated dropdown component for react.
Unopinionated dropdown component for react.

Unopinionated dropdown component for react.

Akinwunmi Aguda 7 Jul 11, 2022
"Drag to resize" (sizing) as React Component.

react-drag-sizing "Drag to resize" (sizing) as React Component Rewritten with TS & React-hooks Polyfill workaround with React 16.8 Support both mous

Fritz Lin 13 Nov 7, 2022
🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.
🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.

🦋 react-butterfiles A small component for building file upload fields of any type, for example a simple file upload button or an image gallery field

Adrian Smijulj 45 Aug 26, 2022
A rectangle react component which can be resized and rotated

React-resizable-rotatable-draggable-rectangle A react widget that can be resized and rotated via a handler. Installation npm install --save react-resi

MockingBot 237 Nov 11, 2022
React component which implements scrolling via holding the mouse button or touch
React component which implements scrolling via holding the mouse button or touch

React Indiana Drag Scroll Implements scroll on drag Examples / Sandbox Welcome to journey! Try it yourself! Go to demo website. Install npm install --

null 413 Dec 28, 2022
@custom-elements-manifest/analyzer plugin to ✨ automatically ✨ create react wrappers for your custom elements

cem-plugin-reactify @custom-elements-manifest/analyzer plugin to automatically create React wrappers for your custom elements based on your custom ele

Pascal Schilp 9 Jul 29, 2022
React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.
React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content.

MohammadAli Karimi 11 Nov 27, 2022
A simple draggable list component for React
A simple draggable list component for React

react-drag-listview React drag list component. install Example Drag Rows Simple dragging demo Dragging Ant-Design table Dragging Ant-Design table widt

浅搁 224 Oct 9, 2022
DraggableDrawer is a component for react-native, it allows you have a vertical draggable drawer view that you can drag up or drag down. So, if you drag and release that component, then it keeps moving until reach either initial position or container border.
DraggableDrawer is a component for react-native, it allows you have a vertical draggable drawer view that you can drag up or drag down. So, if you drag and release that component, then it keeps moving until reach either initial position or container border.

react-native-draggable-drawer DraggableDrawer is a component for react-native, it allows you have a vertical draggable drawer view that you can drag u

Juan Gabriel Gutierrez 56 Oct 7, 2021
🖱 A resizable and draggable component for React.
🖱 A resizable and draggable component for React.

A resizable and draggable component for React. Table of Contents Screenshot Live Demo Storybook CodeSandbox Install Usage Props Instance API updateSiz

bokuweb 3.1k Jan 2, 2023
React draggable component
React draggable component

React-Draggable A simple component for making elements draggable. Draggable divI can now be moved around!/div /Draggable Demo Changelog Vers

Samuel Reed 8.1k Jan 1, 2023
React draggable component
React draggable component

A simple component for making elements draggable.

RGL 8.1k Jan 8, 2023
Draggable and Resizable component running at 60FPS using React Native Reanimated v2
Draggable and Resizable component running at 60FPS using React Native Reanimated v2

reanimated-drag-resize Draggable and Resizable React Native Component running at 60FPS using React Native Reanimated v2 Main Dependencies react-native

Fateh Farooqui 39 Dec 28, 2022
React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor. - extensibility to customize the widgets or behaviors. - accessbility and testability support

Work in progress react-flow-editor Overview React component to create graphic user interface with: draggable nodes with ports and edges on a directed

Microsoft 102 Dec 29, 2022
React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor

React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor. - extensibility to customize the widgets or behaviors. - accessbility and testability support

Microsoft 102 Dec 29, 2022
React component for a list of draggable collapsible items
React component for a list of draggable collapsible items

react-draggable-list This component lets you make a user re-orderable list that animates nicely so that the user can easily move large items: The abov

Streak 282 Dec 16, 2022
A draggable toggle-switch component for React.
A draggable toggle-switch component for React.

A draggable toggle-switch component for React. Draggable with the mouse or with a touch screen. Customizable - Easy to customize size, color and more.

Markus Englund 1.3k Dec 28, 2022
Atom like draggable tab react component
Atom like draggable tab react component

React-draggable-tab Atom like draggable tab react component. Demo View Demo Installation npm install --save react-draggable-tab React v0.14 is support

Takeharu.Oshida 140 Aug 17, 2022
Comments
Owner
Haikel Fazzani
💻Don't stop learning☀️.
Haikel Fazzani
GitHub https://haikelfazzani.github.io/drag-react/
React draggable component

React-Draggable A simple component for making elements draggable. <Draggable> <div>I can now be moved around!</div> </Draggable> Demo Changelog Vers

Samuel Reed 8.1k Jan 1, 2023
React draggable component

A simple component for making elements draggable.

RGL 8.1k Jan 8, 2023
Draggable and Resizable component running at 60FPS using React Native Reanimated v2

reanimated-drag-resize Draggable and Resizable React Native Component running at 60FPS using React Native Reanimated v2 Main Dependencies react-native

Fateh Farooqui 39 Dec 28, 2022
React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor. - extensibility to customize the widgets or behaviors. - accessbility and testability support

Work in progress react-flow-editor Overview React component to create graphic user interface with: draggable nodes with ports and edges on a directed

Microsoft 102 Dec 29, 2022
React component for a list of draggable collapsible items

react-draggable-list This component lets you make a user re-orderable list that animates nicely so that the user can easily move large items: The abov

Streak 282 Dec 16, 2022
A draggable and resizable grid layout with responsive breakpoints, for React.

React-Grid-Layout React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.

RGL 16.9k Jan 2, 2023
Draggable tree for react.

react-draggable-tree Draggable tree for react. installation npm install -S @jswork/react-draggable-tree properties Name Type Required Default Descript

feizheng 1 Mar 25, 2021
Draggable, Smart menu for react

Features ⚡ Configurable and smart floating menu for react ⚙️ Comes with a lot of options to customize the behavior of the menu ?? Auto detects edges o

Prabhu Murthy 129 Jan 6, 2023
:ok_hand: Drag and drop so simple it hurts

Drag and drop so simple it hurts Official React wrapper for dragula. Demo Try out the demo! Install You can get it on npm. npm install react-dragula -

Nicolás Bevacqua 976 Nov 26, 2022
Simple HTML5 drag-drop zone with React.js.

react-dropzone Simple React hook to create a HTML5-compliant drag'n'drop zone for files. Documentation and examples at https://react-dropzone.js.org.

null 9.4k Jan 2, 2023