Creating an app using Drag and Drop with React without libraries ๐Ÿค

Overview

Creating an app using Drag and Drop with React without libraries ๐Ÿ‘† !

This time, we are going to implement the functionality to do a Drag & Drop with React JS and without any other external package or library!

ย 

App demo gif

ย 

Features โš™๏ธ

  1. Card dragging.
  2. Dropping cards into a container.
  3. Sorting cards.

ย 

Technologies ๐Ÿงช

  • React JS
  • TypeScript
  • Vite JS
  • Vanilla CSS 3

ย 

Installation ๐Ÿงฐ

  1. Clone the repository (you need to have Git installed).
    git clone https://github.com/Franklin361/drag-and-drop-react
  1. Install dependencies of the project.
    npm install
  1. Run the project.
    npm run dev

ย 

Links โ›“๏ธ

Demo of the application ๐Ÿ”ฅ

Here's the link to the tutorial in case you'd like to take a look at it! eyes ๐Ÿ‘€

You might also like...
React drag and drop framework with inbuilt virtualizing scrollbars.

About us This library was made by Forecast - powered by AI, Forecast is supporting your work process with a complete Resource & Project Management pla

Drag and Drop library for React.

react-tiny-dnd Drag and Drop library for React. Demo Install via npm npm install react-tiny-dnd or yarn add react-tiny-dnd Features Vertical lists Eas

:ok_hand: Drag and drop so simple it hurts
: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 -

A directive based drag and drop container for solid-js
A directive based drag and drop container for solid-js

A directive based drag and drop container for solid-js

๐Ÿฆ‹ 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

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.

example how to use react-dropzone for drag 'n drop uploader

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Taskboard with drag'n drop feature. Built w/ React, TypeScript
Taskboard with drag'n drop feature. Built w/ React, TypeScript

Drag & Drop Taskboard A taskboard application with drag and drop feature. Live demo is here. Tech Stack Language: TypeScript UI-Components: Ant Design

"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

Owner
Franklin Martinez
Higher University Technician | Front-End Developer :atom_symbol:
Franklin Martinez
Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Atlassian 28.9k Dec 31, 2022
๐Ÿ”€ Drag and drop for your React lists and tables. Accessible. Tiny.

react-movable See all the other examples and their source code! Installation yarn add react-movable Usage import * as React from 'react'; import { Li

Vojtech Miksu 1.3k Dec 30, 2022
React drag and drop sort support flex layout and nested.

react-flex-dnd React drag and drop sort support flex layout and nested. This package using hooks, note that your React version is above 16.8 :) Why fl

lvshihao 7 Nov 14, 2022
ReactJS drag and drop functionality for mouse and touch devices

DragDropContainer and DropTarget Live demo: peterh32.github.io/react-drag-drop-container Features Very easy to implement and understand. Works on mous

Peter Hollingsworth 142 Sep 26, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.7k Jan 7, 2023
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.7k Jan 6, 2023
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Claudรฉric Demers 6.5k Jan 7, 2023
Drag and Drop for React

Drag and Drop for React

React DnD 18.7k Jan 4, 2023
Light React Drag & Drop files and images library styled by styled-components

Light React Drag & Drop files and images library styled by styled-components

null 143 Dec 28, 2022
React Drag and Drop file input

React Drag and Drop file input

Tran Anh Tuat 45 Dec 30, 2022