React Draggable Box without HTML Drag & Drop API

View Demo

---

Web	Mobile

About The Project

This project is documentation of a study to develop the Drag & Drop visual interaction without HTML Drag & Drop API.

Built With

• React
• TypeScript
• jest
• vite
• pnpm
• react-device-detect

Getting Started

Prerequisites

• Before you start, install pnpm package to global

  npm install --global pnpm

• Docker install required

  https://www.docker.com/get-started

Installation

Local

1. Clone the repo

   git clone https://github.com/VannsKang/React-Draggable-Box-Without-HTML-API.git

2. Install NPM packages

   pnpm install

3. Run the project

   pnpm dev

4. Build the package

   pnpm build

5. Test the project

   pnpm test:unit

Docker

1. Run the Docker inside ./docker folder

   docker-compose up

Introduction

1. The parent component Draggable and child component BOX were designed as <Draggable> <Box /> </Draggable>

2. Not using HTML Drag & Drop API. Configured without using any 3rd parties or libraries

3. Declare a certain draggable area for the draggable box.

Project Tree

.
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── Box/
│   │   │   ├── index.tsx
│   │   │   └── index.test.tsx
│   │   └── Draggable/
│   │       ├── index.tsx
│   │       └── index.test.tsx
│   ├── styles/
│   │   ├── App.css
│   │   └── index.css
│   ├── App.test.ts
│   ├── App.tsx
│   ├── index.tsx
│   └── ...
├── package.json
├── tsconfig.json
└── ...

NPM Packages

packages

dependencies:
react 17.0.2
react-device-detect 2.1.2
react-dom 17.0.2

devDependencies:
@testing-library/jest-dom 5.16.2    identity-obj-proxy 3.0.0
@testing-library/react 12.1.4       jest 27.5.1
@testing-library/user-event 13.5.0  jest-environment-jsdom 27.5.1
@types/react 17.0.40                typescript 4.6.2
@types/react-dom 17.0.13            vite 2.8.6
@vitejs/plugin-react 1.2.0          vite-jest 0.1.4

ETC

This project is optimized & tested in Chrome.

---

Developed by SOOM

Soomlog.tech