https://github.com/akashanand708/react-drag-element

react-drag-element provides a very simple way to make any react component draggable or floating on the screen.
https://github.com/akashanand708/react-drag-element

react react-dnd react-drag-and-drop react-draggable reactjs

Last synced: 3 months ago
JSON representation

react-drag-element provides a very simple way to make any react component draggable or floating on the screen.

• Host: GitHub
• URL: https://github.com/akashanand708/react-drag-element
• Owner: akashanand708
• License: mit
• Created: 2018-11-11T12:16:54.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-17T16:28:06.000Z (over 6 years ago)
• Last Synced: 2024-10-16T11:32:15.398Z (7 months ago)
• Topics: react, react-dnd, react-drag-and-drop, react-draggable, reactjs
• Language: JavaScript
• Size: 2.02 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-drag-element

react-drag-element provides a very simple way to make any react component draggable or floating on the screen. It also calculates top and left positions for draggable component.

# Installation

`npm install react-drag-element`

# Sample

![](ezgif.com-crop.gif)

# Quick Start

```

import CustomDrag from 'react-drag-element';

getFloatingComponentPosition = (positions) => {

        console.log("FLOATING COMPONENT POSITIONS....", positions);

}

render{

    return(

          

            


              Header

              

            

          

         );

}


```

# Props

1. getPositions --> Methods to get positions. (Optional)

2. dragItemId   --> Id for the draggable component. (Required)

3. dragId       --> Id for the div inside draggable component,user can drag and drop the draggable component by clicking and dragging this area.  (Required)

4. draggingType --> horizontal/vertical (optional), if this value is not provided, it will behave random movement.