
Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
react-drag-and-drop
Advanced tools
This library contains some very basic draggable and droppable components.
You probably want to use something more stable and feature rich like react-dnd.
npm install react-drag-and-drop
import { Draggable, Droppable } from 'react-drag-and-drop'
class App extends React.Component {
render() {
<div>
<ul>
<Draggable type="fruit" data="banana"><li>Banana</li></Draggable>
<Draggable type="fruit" data="apple"><li>Apple</li></Draggable>
<Draggable type="metal" data="silver"><li>Silver</li></Draggable>
</ul>
<Droppable
types={['fruit']} // <= allowed drop types
onDrop={this.onDrop.bind(this)}>
<ul className="Smoothie"></ul>
</Droppable>
</div>
}
onDrop(data) {
console.log(data)
// => banana
}
}
So the idea is that you wrap your components in Draggable and Droppable containers (instead of using mixins), define types and data to carry. You can also hook into the different drag events to create more funk. The best way (for now) to figure out how is to peak inside the src
directory. The implementation is quite minimal.
wrapperComponent
prop where one can pass a component to be used instead of the standard components for Draggable
and Droppable
:tada: Thanks to @aaa707 for this one :rocket:enabled
prop for Droppable componentclassName
as prop - thanks @abdennour :tada:enjoy
FAQs
Basic Drag and Drop for React
The npm package react-drag-and-drop receives a total of 5,177 weekly downloads. As such, react-drag-and-drop popularity was classified as popular.
We found that react-drag-and-drop demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.