# dragking

> The Drag Library allows users to implement drag-and-drop functionality for any element within a specified box area. With this library, developers can effortlessly enable dragging of HTML elements, making it a versatile tool for interactive web application

Latest version **1.2.0** (published 2023-10-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install dragking
pnpm add dragking
yarn add dragking
bun add dragking
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2023-10-25 |
| First published | 2023-09-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 21.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | aditya nandlal whatapp 8924044100 |
| Maintainers | adityanandlal |
| Keywords | drag-and-drop, drag, drop, React, customization, dynamic, draggable elements, drag-and-drop library, JavaScript framework, drag-and-drop functionality |

## Links

- npm: https://www.npmjs.com/package/dragking
- Repository: Usage:
- npm.io page: https://npm.io/package/dragking

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2023-10-25
- 1.1.6 — 2023-09-17
- 1.1.5 — 2023-09-17
- 1.1.4 — 2023-09-17
- 1.1.3 — 2023-09-17
- 1.1.2 — 2023-09-17
- 1.1.1 — 2023-09-17
- 1.1.0 — 2023-09-15
- 1.0.4 — 2023-09-15
- 1.0.3 — 2023-09-15
- 1.0.2 — 2023-09-15
- 1.0.1 — 2023-09-15
- 1.0.0 — 2023-09-15

## README

# DragKing

The DragKing library empowers developers to easily implement drag-and-drop functionality for HTML elements within a specified container. This versatile tool makes it effortless for developers to enable dragging of HTML elements, enhancing the interactivity of web applications. DragKing offers seamless integration and extensive customization options, allowing developers to create dynamic and engaging user interfaces effortlessly.

## Features

- **Drag-and-Drop**: Implement drag-and-drop functionality for HTML elements with ease.
- **Customization**: Customize the drag behavior to suit your application's needs.
- **Effortless Integration**: Easily integrate DragKing into your web projects.
- **Enhanced User Experience**: Create dynamic and interactive user interfaces.
- **Versatile Usage**: Suitable for a wide range of web applications.

## Installation

You can install DragKing using npm:

```bash
npm install dragking
```

## Usage

To get started with DragKing, follow these steps:

1. **Installation**: Install DragKing as mentioned above.

2. **Initialization**:

   ```javascript
   import  Drag  from "dragking";

   let drag = new Drag("#drag-area", ".drag-item");
   ```

3. **Start Dragging**:

   Call the `start()` method to enable drag-and-drop functionality:

   ```javascript
   drag.start();
   ```

4. **HTML Structure**:

   Ensure you have the necessary HTML structure with a container and draggable elements, as shown below:

   ```html
   <div id="drag-area" style="border: 1px solid black; width: 500px; height: 500px; margin-left: 100px;"></div>
   <img src="./icon.png" class="drag-item" alt="" width="60px" srcset=""/>
   <!-- Add more draggable elements as needed -->
   ```

1. View the demo [DragKing demo](https://dragking.vercel.app).
2. For more detailed information and examples, please refer to the [DragKing Documentation](#link-to-documentation).

## Explanation of `new Drag("#drag-area", ".drag-item")`

The code `new Drag("#drag-area", ".drag-item")` creates a new instance (object) of the `Drag` class, enabling drag-and-drop functionality within your web application. Here's an explanation of this code:

1. `"#drag-area"`: This CSS selector targets the container element where drag-and-drop functionality will be enabled. It uses the `#` symbol followed by `drag-area`, typically representing the `id` attribute of an HTML element. This means it will target a unique HTML element with an `id` attribute equal to "drag-area" as the drag-and-drop container.

2. `".drag-item"`: This selector targets the draggable items within the specified container. It selects the HTML elements that users can drag within the defined container, allowing interactive user experiences.

Now, with this code, you can easily implement drag-and-drop functionality in your web application. Enjoy enhanced interactivity and dynamic user interfaces!

---
_Source: https://npm.io/package/dragking · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._