https://github.com/fmanimashaun/dragndrop

This project is a simple implementation of a sortable drag and drop list using HTML, CSS, JavaScript, and Vite. It allows users to interact with elements on the page by clicking and dragging them to different locations within a list, effectively changing the order of the list items.
https://github.com/fmanimashaun/dragndrop

css3 drag-and-drop html5 javascript vite

Last synced: 11 days ago
JSON representation

This project is a simple implementation of a sortable drag and drop list using HTML, CSS, JavaScript, and Vite. It allows users to interact with elements on the page by clicking and dragging them to different locations within a list, effectively changing the order of the list items.

• Host: GitHub
• URL: https://github.com/fmanimashaun/dragndrop
• Owner: fmanimashaun
• License: mit
• Created: 2023-11-15T07:22:12.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-15T08:12:49.000Z (over 1 year ago)
• Last Synced: 2025-01-20T23:07:39.667Z (about 1 month ago)
• Topics: css3, drag-and-drop, html5, javascript, vite
• Language: JavaScript
• Homepage: https://fmanimashaun.github.io/dragNDrop/
• Size: 5.54 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sortable Drag and Drop List Project

## Introduction

This project is a simple implementation of a sortable drag and drop list using HTML, CSS, JavaScript, and Vite. It allows users to interact with elements on the page by clicking and dragging them to different locations within a list, effectively changing the order of the list items.

## Technologies Used

- HTML: Used for structuring the content on the webpage.

- CSS: Used for styling the webpage and the draggable list items.

- JavaScript: Used for implementing the sortable drag and drop functionality.

- Vite: A build tool that provides a faster and leaner development experience for modern web projects.

## Features

- Sortable List: Users can click on a list item, drag it to a different location within the list, and drop it, thereby changing the order of the list items.

- Visual Feedback: The list item being dragged changes its appearance, providing visual feedback to the user.

## Setup and Usage

1. Clone the repository to your local machine.

2. Run `npm install` to install the necessary dependencies.

3. Run `npm run dev` to start the development server.

4. Open the `index.html` file in your web browser to view the webpage.

5. To drag a list item, click and hold the left mouse button on it, move it to the desired location within the list, and then release the mouse button to drop it.

## Build

To create a production build, run `npm run build`. Vite will create a `dist` folder with the production-ready website.

## Deploy

To deploy to github, run `npm run deploy`. 

## Live link

[LINK](https://fmanimashaun.github.io/dragNDrop/)

## Code Overview

The main logic for the sortable drag and drop functionality is contained within the `script.js` file. It uses the HTML Drag and Drop API to enable the dragging and dropping of list items. The `style.css` file contains the necessary styles for the draggable list items.

## Contributing

Contributions, issues, and feature requests are welcome. Feel free to check issues page if you want to contribute.

## License

This project is MIT licensed.