Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dzenis-h/drag-n-drop
Simple vanilla JS drag & drop implementation built for the purpose of refreshing classes, static methods, inheritance, this keyword, CSS selectors, DOM APIs, etc ...
https://github.com/dzenis-h/drag-n-drop
browser-api class css-selector css3 dom drag-and-drop flexbox html5 inheritance javascript prototypal-inheritance static-method this vanilla-javascript
Last synced: 24 days ago
JSON representation
Simple vanilla JS drag & drop implementation built for the purpose of refreshing classes, static methods, inheritance, this keyword, CSS selectors, DOM APIs, etc ...
- Host: GitHub
- URL: https://github.com/dzenis-h/drag-n-drop
- Owner: dzenis-h
- Created: 2020-01-10T23:07:06.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-06-22T23:11:01.000Z (over 1 year ago)
- Last Synced: 2024-11-17T15:56:47.348Z (3 months ago)
- Topics: browser-api, class, css-selector, css3, dom, drag-and-drop, flexbox, html5, inheritance, javascript, prototypal-inheritance, static-method, this, vanilla-javascript
- Language: JavaScript
- Size: 5.86 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
##
# 
Drag-n-Drop
## Overview 👀
Drag-n-Drop is a simple vanilla JS drag and drop implementation built for the purpose of refreshing classes, static methods, inheritance, this keyword, CSS selectors, DOM APIs, etc. It allows you to create draggable elements and drop them into different containers. You can also rearrange the elements within the same container or move them back to the initial position.
## Tech Stack 🛠️
| Tech | Docs | Description |
| :---: | :---: | :--- |
|  | [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) | A markup language for structuring and presenting web pages |
|  | [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS) | A style sheet language for describing the appearance of web pages |
|  | [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) | A scripting language for creating dynamic and interactive web pages |
|  | [Bootstrap5](https://getbootstrap.com/docs/5.0/getting-started/introduction/) | A framework for building responsive and mobile-first web pages |
|  | [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) | An interface that represents and manipulates HTML and XML documents |
|  | [Drag-and-Drop](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) | An API that enables applications to use drag-and-drop features in browsers |
|  | [CSS3 Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) | A layout method for arranging items in rows or columns |
|  | [Class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) | A syntactic sugar for defining constructor functions and prototypes in JavaScript |
|  | [Vanilla JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) | The plain version of JavaScript without any additional libraries or frameworks |
|  | [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) | A keyword that refers to the current execution context in JavaScript |
|  | [Inheritance](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance) | A mechanism that allows one object to acquire the properties and methods of another object in JavaScript |
|  | [CSS Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) | A pattern that matches one or more elements in a document tree |
|  | [Browser API](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) | An interface that allows JavaScript code to interact with various features and services provided by the browser |
|  | [Prototypal Inheritance](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes) | A mechanism that allows objects to inherit features from other objects in JavaScript |
|  | [Static Method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static) | A method that belongs to the class rather than the instance in JavaScript |
## Contributing 🙌
Contributions are always welcome! If you would like to contribute to this project, please follow these steps:
1. Fork the repository. 🍴
2. Create a new branch. 🌵
3. Make your changes and test them thoroughly. 👨💻
4. Submit a pull request. ✔
## License 📑
This project is licensed under the MIT License. See the [LICENSE](https://docs.google.com/document/d/11WK7tVoTFRMcWCuGZQCRWxEsDUEJ_6ArtfV-NjWcBCU/edit?usp=sharing) file for details.
## Credits 👨🏻💻
This repo was created by [Dzenis H.](https://dzenis.tech)
Contributions are more than welcome. 🫡
If you like what you see, please consider giving a ⭐️