Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/junqiuzhang/easy-drag
easy to realize drag and drop effect
https://github.com/junqiuzhang/easy-drag
css3 drag-and-drop draggable javascript
Last synced: 22 days ago
JSON representation
easy to realize drag and drop effect
- Host: GitHub
- URL: https://github.com/junqiuzhang/easy-drag
- Owner: junqiuzhang
- License: mit
- Created: 2021-10-13T11:41:07.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-05-13T14:15:35.000Z (over 2 years ago)
- Last Synced: 2024-12-13T08:12:54.849Z (about 1 month ago)
- Topics: css3, drag-and-drop, draggable, javascript
- Language: TypeScript
- Homepage:
- Size: 46.9 KB
- Stars: 36
- Watchers: 2
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# easy-drag
[中文文档](https://github.com/junqiuzhang/easy-drag/blob/master/README_zh-CN.md)
Easy to realize drag effect
## Principle
Listen to `mousedown`, `mousemove`, and `mouseup` events, and set the element's transform property to drag and drop according to the mouse position
## Feature
1. Use JavaScript implementation, support any framework
2. Use `transform` property implementation that supports elements in any positioning mode
3. Lightweight, only 2KB
4. Performance, hardware acceleration for a silky drag experience
5. Supports PC and mobile terminals
## Install
```
# Yarn
yarn add easy-drag
# NPM
npm install --save easy-drag
```
## Usage
```ts
import enableDrag from "easy-drag";
const disableDrag = enableDrag(document.querySelector(".draggable"));
if ("want to disable drag") {
disableDrag();
}
```
Or
```ts
import enableDrag from "easy-drag";
const disableDrag = enableDrag(document.querySelector(".draggable"), {
outerElement: document.body,
innerElement: document.querySelector(".drag-icon"),
onDragStart: () => {},
onDrag: () => {},
onDragEnd: () => {},
});
if ("want to disable drag") {
disableDrag();
}
```
Description:
- outerElement: drag range element, default document.body
- innerElement: drag icon element, application scenario: Pop-ups need to be draggable, but only the title area can be dragged
- onDragStart: callback on drag start, parameter v is element drag translate vector (relative to initial position)
- onDrag: callback in dragging, parameter v is element drag translate vector (relative to initial position)
- onDragEnd: callback on drag end, parameter v is element drag translate vector (relative to initial position)
### Interface
```ts
import { TVector } from "./utils";
interface IOptions {
/** element that control drag range */
outerElement?: HTMLElement;
/** element that to drag */
innerElement?: HTMLElement;
/** callback on drag start */
onDragStart?: (v: TVector) => void;
/** callback in dragging */
onDrag?: (v: TVector) => void;
/** callback on drag end */
onDragEnd?: (v: TVector) => void;
}
/**
* use transform easy to realize drag effect
*/
declare const enableDrag: (
element: HTMLElement,
options?: IOptions | undefined
) => () => void;
export default enableDrag;
```
## License
MIT