React moveable

React moveable DEFAULT

npm

React Moveable

npm versionTravis (.org)

A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.

Demo / Storybook / API / Main Project

Features

  • Draggable refers to the ability to drag and move targets.
  • Resizable indicates whether the target's width and height can be increased or decreased.
  • Scalable indicates whether the target's x and y can be scale of transform.
  • Rotatable indicates whether the target can be rotated.
  • Warpable indicates whether the target can be warped(distorted, bented).
  • Pinchable indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.
  • Groupable indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.
  • Snappable indicates whether to snap to the guideline.
  • OriginDraggable* indicates Whether to drag origin.
  • Clippable indicates Whether to clip the target.
  • Roundable indicates Whether to show and drag or double click border-radius.
  • Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)
  • Support Major Browsers
  • Support 3d Transform

Installation

Documents

How to use

importMoveablefrom"react-moveable";render(){return(<Moveabletarget={document.querySelector(".target")}container={null}origin={true}/* Resize event edges */edge={false}/* draggable */draggable={true}throttleDrag={0}onDragStart={({ target, clientX, clientY })=>{console.log("onDragStart",target);}}onDrag={({ target, beforeDelta, beforeDist, left, top, right, bottom, delta, dist, transform, clientX, clientY,}: OnDrag)=>{console.log("onDrag left, top",left,top);// target!.style.left = `${left}px`;// target!.style.top = `${top}px`;console.log("onDrag translate",dist);target!.style.transform=transform;}}onDragEnd={({ target, isDrag, clientX, clientY })=>{console.log("onDragEnd",target,isDrag);}}/* When resize or scale, keeps a ratio of the width, height. */keepRatio={true}/* resizable*//* Only one of resizable, scalable, warpable can be used. */resizable={true}throttleResize={0}onResizeStart={({ target , clientX, clientY})=>{console.log("onResizeStart",target);}}onResize={({ target, width, height, dist, delta, direction, clientX, clientY,}: OnResize)=>{console.log("onResize",target);delta[0]&&(target!.style.width=`${width}px`);delta[1]&&(target!.style.height=`${height}px`);}}onResizeEnd={({ target, isDrag, clientX, clientY })=>{console.log("onResizeEnd",target,isDrag);}}/* scalable *//* Only one of resizable, scalable, warpable can be used. */scalable={true}throttleScale={0}onScaleStart={({ target, clientX, clientY })=>{console.log("onScaleStart",target);}}onScale={({ target, scale, dist, delta, transform, clientX, clientY,}: OnScale)=>{console.log("onScale scale",scale);target!.style.transform=transform;}}onScaleEnd={({ target, isDrag, clientX, clientY })=>{console.log("onScaleEnd",target,isDrag);}}/* rotatable */rotatable={true}throttleRotate={0}onRotateStart={({ target, clientX, clientY })=>{console.log("onRotateStart",target);}}onRotate={({ target, delta, dist, transform, clientX, clientY,}: onRotate)=>{console.log("onRotate",dist);target!.style.transform=transform;}}onRotateEnd={({ target, isDrag, clientX, clientY })=>{console.log("onRotateEnd",target,isDrag);}}/* warpable *//* Only one of resizable, scalable, warpable can be used. *//* this.matrix = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, ] */warpable={true}onWarpStart={({ target, clientX, clientY })=>{console.log("onWarpStart",target);}}onWarp={({ target, clientX, clientY, delta, dist, multiply, transform,})=>{console.log("onWarp",target);// target.style.transform = transform;this.matrix=multiply(this.matrix,delta);target.style.transform=`matrix3d(${this.matrix.join(",")})`;}}onWarpEnd={({ target, isDrag, clientX, clientY })=>{console.log("onWarpEnd",target,isDrag);}}// Enabling pinchable lets you use events that// can be used in draggable, resizable, scalable, and rotateable.pinchable={true}onPinchStart={({ target, clientX, clientY, datas })=>{// pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStartconsole.log("onPinchStart");}}onPinch={({ target, clientX, clientY, datas })=>{// pinch event occur before drag, rotate, scale, resizeconsole.log("onPinch");}}onPinchEnd={({ isDrag, target, clientX, clientY, datas })=>{// pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEndconsole.log("onPinchEnd");}}/>);}

Developments

The main project was made with and I used to make it lighter with umd.

For development and testing, check in packages/react-moveable.

$ cd packages/react-moveable $ npm i $ npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Files related to major features.

Show Your Support

Please give a if this project helped you!

Contributing

If you have any questions or requests or want to contribute to or other packages, please write the issue or give me a Pull Request freely.

Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

License

This project is MIT licensed.

Sours: https://www.npmjs.com/package/react-moveable

🔥 Features

  • Draggable refers to the ability to drag and move targets.
  • Resizable indicates whether the target's width and height can be increased or decreased.
  • Scalable indicates whether the target's x and y can be scale of transform.
  • Rotatable indicates whether the target can be rotated.
  • Warpable indicates whether the target can be warped(distorted, bented).
  • Pinchable indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.
  • Groupable indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.
  • Snappable indicates whether to snap to the guideline.
  • OriginDraggable* indicates Whether to drag origin.
  • Clippable indicates Whether to clip the target.
  • Roundable indicates Whether to show and drag or double click border-radius.
  • Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)
  • Support Major Browsers
  • Support 3d Transform

⚙️ Installation

📄 Documents

🚀 How to use

⚙️ Developments

The main project was made with and I used to make it lighter with umd.

For development and testing, check in packages/react-moveable.

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Files related to major features.

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to or other packages, please write the issue or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

📝 License

This project is MIT licensed.

Sours: https://npm.io/package/react-moveable
  1. Mount carmel urology
  2. Sporting game score
  3. Interlocking wire shelves
  4. Bape pop funko
  5. Mathnasium los angeles

A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.

importMoveablefrom"react-moveable";render(){return(<Moveabletarget={document.querySelector(".target")}container={null}origin={true}/* Resize event edges */edge={false}/* draggable */draggable={true}throttleDrag={0}onDragStart={({ target, clientX, clientY })=>{console.log("onDragStart",target);}}onDrag={({ target, beforeDelta, beforeDist, left, top, right, bottom, delta, dist, transform, clientX, clientY,}: OnDrag)=>{console.log("onDrag left, top",left,top);// target!.style.left = `${left}px`;// target!.style.top = `${top}px`;console.log("onDrag translate",dist);target!.style.transform=transform;}}onDragEnd={({ target, isDrag, clientX, clientY })=>{console.log("onDragEnd",target,isDrag);}}/* When resize or scale, keeps a ratio of the width, height. */keepRatio={true}/* resizable*//* Only one of resizable, scalable, warpable can be used. */resizable={true}throttleResize={0}onResizeStart={({ target , clientX, clientY})=>{console.log("onResizeStart",target);}}onResize={({ target, width, height, dist, delta, direction, clientX, clientY,}: OnResize)=>{console.log("onResize",target);delta[0]&&(target!.style.width=`${width}px`);delta[1]&&(target!.style.height=`${height}px`);}}onResizeEnd={({ target, isDrag, clientX, clientY })=>{console.log("onResizeEnd",target,isDrag);}}/* scalable *//* Only one of resizable, scalable, warpable can be used. */scalable={true}throttleScale={0}onScaleStart={({ target, clientX, clientY })=>{console.log("onScaleStart",target);}}onScale={({ target, scale, dist, delta, transform, clientX, clientY,}: OnScale)=>{console.log("onScale scale",scale);target!.style.transform=transform;}}onScaleEnd={({ target, isDrag, clientX, clientY })=>{console.log("onScaleEnd",target,isDrag);}}/* rotatable */rotatable={true}throttleRotate={0}onRotateStart={({ target, clientX, clientY })=>{console.log("onRotateStart",target);}}onRotate={({ target, delta, dist, transform, clientX, clientY,}: onRotate)=>{console.log("onRotate",dist);target!.style.transform=transform;}}onRotateEnd={({ target, isDrag, clientX, clientY })=>{console.log("onRotateEnd",target,isDrag);}}/* warpable *//* Only one of resizable, scalable, warpable can be used. *//* this.matrix = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, ] */warpable={true}onWarpStart={({ target, clientX, clientY })=>{console.log("onWarpStart",target);}}onWarp={({ target, clientX, clientY, delta, dist, multiply, transform,})=>{console.log("onWarp",target);// target.style.transform = transform;this.matrix=multiply(this.matrix,delta);target.style.transform=`matrix3d(${this.matrix.join(",")})`;}}onWarpEnd={({ target, isDrag, clientX, clientY })=>{console.log("onWarpEnd",target,isDrag);}}// Enabling pinchable lets you use events that// can be used in draggable, resizable, scalable, and rotateable.pinchable={true}onPinchStart={({ target, clientX, clientY, datas })=>{// pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStartconsole.log("onPinchStart");}}onPinch={({ target, clientX, clientY, datas })=>{// pinch event occur before drag, rotate, scale, resizeconsole.log("onPinch");}}onPinchEnd={({ isDrag, target, clientX, clientY, datas })=>{// pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEndconsole.log("onPinchEnd");}}/>);}

The main project was made with and I used to make it lighter with umd.

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

If you have any questions or requests or want to contribute to or other packages, please write the issue or give me a Pull Request freely.

Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

License

This project is MIT licensed.

Sours: https://github.com/daybrush/moveable/tree/master/packages/react-moveable

Moveable

Moveable

Moveable is Draggable! Resizable! Scalable! Rotatable!

Constructor

new Moveable(parentElement, optionsopt)

Source:
NameTypeDefaultDescription
HTMLElement | SVGElement
?MoveableOptions

Extends

Namespaces

Clippable
Draggable
Group
OriginDraggable
Pinchable
Resizable
Rotatable
Roundable
Scalable
Scrollable
Snappable
Warpable

Members

className

Source:

You can specify the className of the moveable controlbox. (default: "")

Example

dragArea

Source:

Add an event to the moveable area instead of the target for stopPropagation. (default: false, true in group)

Example

dragTarget

Source:

The target(s) to drag Moveable target(s) (default: target)

Example

edge

Source:

Resize, Scale Events at edges

Example

origin

Source:

Whether or not the origin controlbox will be visible or not (default: true)

Example

padding

Source:

Add padding around the target to increase the drag area. (default: null)

Example

passDragArea

Source:

Set `pointerEvents: none;` css to pass events in dragArea. (default: false)

Example

target

Source:

The target to indicate Moveable Control Box.

Example

zoom

Source:

Zooms in the elements of a moveable. (default: 1)

Example

Methods

destroy() → {void}

Source:

Remove the Moveable object and the events.

Example
Returns:
Type
void

dragStart(e)

Source:

You can drag start the Moveable through the external `MouseEvent`or `TouchEvent`. (Angular: ngDragStart)

NameTypeDescription
MouseEvent | TouchEventexternal `MouseEvent`or `TouchEvent`
Example

emit(eventName, paramopt) → {boolean}

Source:
Overrides:

Fires an event to call listeners.

NameTypeDefaultDescription
string | ...Event name
?TargetParam<any> | ...Event parameter

emit<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

NameTypeDescription
extends Param ? Name : never

emit<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

NameTypeDescription
Name
TargetParam<Param>
Example
Returns:

If false, stop the event.

Type
boolean

getManager() → {MoveableManagerInterface<any, any>}

Source:

Get a manager that manages the moveable's state and props.

Example
Returns:

- The Rect Info

Type
MoveableManagerInterface<any, any>

getRect() → {RectInfo}

Source:

You can get the vertex information, position and offset size information of the target based on the container.

Example
Returns:

- The Rect Info

Type
RectInfo

hitTest(el) → {number}

Source:

Hit test an element or rect on a moveable target.

NameTypeDescription
Element | HitRectelement or rect to test
Example
Returns:

- Get hit test rate (rate > 0 is hitted)

Type
number

isDragging()

Source:

Check if the moveable state is being dragged.

Example
Source:

Whether the coordinates are inside Moveable

NameTypeDescription
numberx coordinate
numbery coordinate
Example
Returns:

- True if the coordinate is in moveable or false

isMoveableElement(target)

Source:

Check if the target is an element included in the moveable.

NameTypeDescription
Elementthe target
Example

off(eventNameopt, listeneropt) → {this}

Source:
Overrides:

Remove listeners registered in the event target.

NameTypeDescription
?string | object | ...Name of the event to be removed
?EventListener<Events[any], this> | ...listener function of the event to be removed

off<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

NameTypeDescription
?Name
?EventListener<Param, this>

off(events) → {this}

NameTypeDescription
EventHash<Events, this>
Example
Returns:
Type
this

on(eventName, listeneropt) → {this}

Source:
Overrides:

Add a listener to the registered event.

NameTypeDescription
string | object | ...Name of the event to be added
?EventListener<Events[any], this> | ...listener function of the event to be added

on<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

NameTypeDescription
Name
EventListener<Param, this>

on(events) → {this}

NameTypeDescription
EventHash<Events, this>
Example
Returns:
Type
this

once<Name extends keyof Events & string, Param = Events[Name]>(eventName, listeneropt) → {Promise<OnEvent<Param, this>>}

Source:
Overrides:

Add a disposable listener and Use promise to the registered event.

NameTypeDescription
NameName of the event to be added
?EventListener<Param, this>disposable listener function of the event to be added
Example
Returns:
Type
Promise<OnEvent<Param, this>>

request(ableName, paramopt, isInstantopt) → {Requester}

Source:
See:

Request able through a method rather than an event. At the moment of execution, requestStart is executed, and then request and requestEnd can be executed through Requester.

NameTypeDefaultDescription
stringableName
?IObject<any>request to be able params.
?booleanIf isInstant is true, request and requestEnd are executed immediately.
Example
Returns:

- Able Requester. If there is no request in able, nothing will work.

Type
Requester

trigger<Name extends keyof Events>(eventName, paramopt) → {boolean}

Source:
Overrides:

Fires an event to call listeners.

NameTypeDefaultDescription
Name | ...Event name
?TargetParam<any> | ...Event parameter

trigger<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

NameTypeDescription
extends Param ? Name : never

trigger<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

NameTypeDescription
Name
TargetParam<Param>
Example
Returns:

If false, stop the event.

Type
boolean

updateRect(typeopt, isTargetopt, isSetStateopt)

Source:

If the width, height, left, and top of all elements change, update the shape of the moveable.

NameTypeDefaultDescription
?"Start" | "" | "End"
?boolean
?boolean
Example

updateTarget(typeopt)

Source:

If the width, height, left, and top of the only target change, update the shape of the moveable.

NameTypeDescription
?"Start" | "" | "End"
Example

Type Definitions

Able<Props extends IObject<any> = IObject<any>, Events extends IObject<any> = IObject<any>>

Source:
Properties:
NameTypeDescription
string
?[key extends keyof Props]: any
?[key extends keyof Events]: string
?boolean
?string
?boolean
?boolean
?string[]
?(moveable: any) => any
?(moveable: any, renderer: Renderer) => any
?(moveable: any, e: GestoTypes.OnDragStart) => any
?(moveable: any, e: GestoTypes.OnDrag) => any
?(moveable: any, e: GestoTypes.OnDragEnd) => any
?(moveable: any, e: GestoTypes.OnPinchStart) => any
?(moveable: any, e: GestoTypes.OnPinch) => any
?(moveable: any, e: GestoTypes.OnPinchEnd) => any
?(moveable: any, e: any) => boolean
?(moveable: any, e: GestoTypes.OnDragStart) => any
?(moveable: any, e: GestoTypes.OnDrag) => any
?(moveable: any, e: GestoTypes.OnDragEnd) => any
?(moveable: any, e: any) => boolean
?(moveable: any, e: GestoTypes.OnDragStart) => any
?(moveable: any, e: GestoTypes.OnDrag) => any
?(moveable: any, e: GestoTypes.OnDragEnd) => any
?(moveable: any, e: GestoTypes.OnPinchStart) => any
?(moveable: any, e: GestoTypes.OnPinch) => any
?(moveable: any, e: GestoTypes.OnPinchEnd) => any
?(moveable: any, e: any) => boolean
?(moveable: any, e: GestoTypes.OnDragStart) => any
?(moveable: any, e: GestoTypes.OnDragStart) => any
?(moveable: any, e: GestoTypes.OnDragEnd) => any
?(moveable: any, e: any) => any
?(moveable: any, e: any) => any
?(moveable: any, e: any) => any
?(moveable: any, e: any) => any
?(moveable: any) => AbleRequester
Type:

AbleRequestParam

Source:
Properties:
NameTypeDescription
?booleanRun the request instantly. (requestStart, request, requestEnd happen at the same time)
any
Type:

DefaultOptions

Source:
Properties:
NameTypeDescription
?SVGElement | HTMLElement | nullThe target(s) to indicate Moveable Control Box. (default: null)
?SVGElement | HTMLElement | nullThe target(s) to drag Moveable target(s) (default: target)
?SVGElement | HTMLElement | nullMoveable Container. Don't set it. (default: parentElement)
?HTMLElement | nullMoveable Portal Container to support other frameworks. Don't set it. (default: container)
?HTMLElement | nullMoveable Root Container (No Transformed Container). (default: container)
?numberZooms in the elements of a moveable. (default: 1)
?Array<string | number> | string | ""The default transformOrigin of the target can be set in advance. (default: "")
?booleanWhether to scale and resize through edge lines. (default: false)
?Able[]You can add your custom able. (default: [])
?stringYou can specify the className of the moveable controlbox. (default: "")
?numberMinimum distance to pinch. (default: 20)
?booleanWhether the container containing the target becomes a pinch. (default: true)
?booleanLets generate events of ables at the same time. (like Resizable, Scalable) (default: false)
?booleanChecks whether this is an element to input text or contentEditable, and prevents dragging. (default: false)
?stringadd nonce property to style for CSP (default: "")
?number | stringYou can set the translateZ value of moveable (default: 50)
?Record<string, any>You can use props in object format or custom props. (default: object)
Type:

DragAreaOptions

Source:
Properties:
NameTypeDescription
?booleanInstead of firing an event on the target, we add it to the moveable control element. You can use click and clickGroup events. (default: if group, true, else false)
?booleanSet `pointerEvents: none;` css to pass events in dragArea.
Type:

HitRect

Source:
Properties:
NameTypeDescription
numbertop position
numberleft position
?numbertarget's width
?numbertarget's height
Type:

MoveableDefaultProps

Source:
Properties:
NameTypeDescription
?MoveableRefType | ArrayFormat<MoveableRefType>
Type:

MoveableOptions

Source:
Properties:
NameTypeDescription
?booleanWhether to show and drag border-radius
?boolean% Can be used instead of the absolute px
?number[]Minimum number of round controls. It moves in proportion by control. [horizontal, vertical] (default: [0, 0])
?number[]Maximum number of round controls. It moves in proportion by control. [horizontal, vertical] (default: [4, 4])
?booleanWhether you can add/delete round controls by double-clicking a line or control. (default: true)
?boolean* Whether to drag origin (default: false)
?boolean% Can be used instead of the absolute px (default: true)
?booleanWhether to clip the target.
?stringYou can force the custom clipPath. (defaultClipPath < style < customClipPath < dragging clipPath)
?stringIf clippath is not set, the default value can be set. (defaultClipPath < style < customClipPath < dragging clipPath)
?boolean% Can be used instead of the absolute px (`rect` not possible) (default: false)
?booleanWhen dragging the target, the clip also moves. (default: true)
?booleanYou can drag the clip by setting clipArea. (default: false)
?booleanWhether the clip is bound to the target. (default: false)
?Array<string | number>Add clip guidelines in the vertical direction. (default: [])
?Array<string | number>Add clip guidelines in the horizontal direction. (default: [])
?numberDistance value that can snap to clip guidelines. (default: 5)
?numberSets the initial rotation of the group. (default 0)
?stringSets the initial transform origin of the group. (default "50% 50%")
?boolean
?booleanWhether or not target can be scrolled to the scroll container (default: false)
?MoveableRefType<HTMLElement>The container to which scroll is applied (default: container)
?numberExpand the range of the scroll check area. (default: 0)
?(e: {scrollContainer: HTMLElement, direction: number[]}) => number[]Sets a function to get the scroll position. (default: Function)
?boolean | Array<"rotatable" | "resizable" | "scalable">Whether or not target can be pinched with draggable, resizable, scalable, rotatable. (default: false)
?booleanWhether or not target can be warped. (default: false)
?boolean | string[]Set directions to show the control box. (default: ["n", "nw", "ne", "s", "se", "sw", "e", "w"])
?boolean | string[]Set directions to show the control box. (default: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise)
?booleanWhether or not target can be rotated. (default: false)
?"top" | "bottom" | "left" | "right" | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "left-top" | "left-bottom" | "right-top" | "right-bottom" | "none"You can specify the position of the rotation. (default: "top")
?numberthrottle of angle(degree) when rotate. (default: 0)
?MoveableRefType | ArrayFormat<MoveableRefType> | falseSet additional rotationTargets.
?boolean | string[]Set directions to show the control box. (default: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise)
?booleanWhether or not target can be scaled. (default: false)
?numberthrottle of scaleX, scaleY when scale. (default: 0)
?booleanWhen resize or scale, keeps a ratio of the width, height. (default: false)
?boolean | string[]Set directions to show the control box. (default: false if rotatable, ["n", "nw", "ne", "s", "se", "sw", "e", "w"] otherwise)
?booleanWhether or not target can be resized. (default: false)
?numberthrottle of width, height when resize. (default: 0)
?booleanWhen resize or scale, keeps a ratio of the width, height. (default: false)
?booleanWhether or not target can be dragged. (default: false)
?numberthrottle of x, y when drag. (default: 0)
?numberthrottle of angle(degree) of x,y when drag. (default: 0)
?numberstart angle(degree) of x,y for throttleDragRotate when drag. (default: 0)
?booleanWhether to move by dragging the edge line
?MoveableRefType | ArrayFormat<MoveableRefType>
Type:

OnBeforeRender

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>The Moveable instance
HTMLElement | SVGElementThe Moveable target
numberThe horizontal coordinate within the application's client area at which the event occurred.
numberThe vertical coordinate within the application's client area at which the event occurred.
IObject<any>Objects that can send information to the following events.
anyThe mouse or touch input event that is invoking the moveable event
booleanWhether or not it is being pinched.
Type:

OnBeforeRenderEnd

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>The Moveable instance
HTMLElement | SVGElementThe Moveable target
numberThe horizontal coordinate within the application's client area at which the event occurred.
numberThe vertical coordinate within the application's client area at which the event occurred.
IObject<any>Objects that can send information to the following events.
anyThe mouse or touch input event that is invoking the moveable event
booleanWhether or not it is being dragged.
booleanWhether or not it is being pinched.
Type:

OnBeforeRenderGroup

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>The Moveable instance
HTMLElement | SVGElementThe Moveable target
numberThe horizontal coordinate within the application's client area at which the event occurred.
numberThe vertical coordinate within the application's client area at which the event occurred.
IObject<any>Objects that can send information to the following events.
anyThe mouse or touch input event that is invoking the moveable event
booleanWhether or not it is being pinched.
Array<HTMLElement | SVGElement>targets set to group.
OnBeforeRender[]children's `beforeRender` events
Type:

OnBeforeRenderGroupEnd

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>The Moveable instance
HTMLElement | SVGElementThe Moveable target
numberThe horizontal coordinate within the application's client area at which the event occurred.
numberThe vertical coordinate within the application's client area at which the event occurred.
IObject<any>Objects that can send information to the following events.
anyThe mouse or touch input event that is invoking the moveable event
booleanWhether or not it is being dragged.
booleanWhether or not it is being pinched.
Array<HTMLElement | SVGElement>targets set to group.
Type:

OnBeforeRenderGroupStart

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>The Moveable instance
HTMLElement | SVGElementThe Moveable target
numberThe horizontal coordinate within the application's client area at which the event occurred.
numberThe vertical coordinate within the application's client area at which the event occurred.
IObject<any>Objects that can send information to the following events.
anyThe mouse or touch input event that is invoking the moveable event
booleanWhether or not it is being pinched.
(transform: string | string[]) => anySet your original transform.
Array<HTMLElement | SVGElement>targets set to group.
OnBeforeRenderStart[]children's `beforeRenderStart` events
Type:

OnBeforeRenderStart

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>The Moveable instance
HTMLElement | SVGElementThe Moveable target
numberThe horizontal coordinate within the application's client area at which the event occurred.
numberThe vertical coordinate within the application's client area at which the event occurred.
IObject<any>Objects that can send information to the following events.
anyThe mouse or touch input event that is invoking the moveable event
booleanWhether or not it is being pinched.
(transform: string | string[]) => anySet your original transform.
Type:

OnClick

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>The Moveable instance
HTMLElement | SVGElementThe Moveable target
numberThe horizontal coordinate within the application's client area at which the event occurred.
numberThe vertical coordinate within the application's client area at which the event occurred.
IObject<any>Objects that can send information to the following events.
anyThe mouse or touch input event that is invoking the moveable event
ElementClicked target.
booleanWhether the clicked target is moveable target.
booleanWhether the clicked target is a child of moveable target.
booleanWhether it is double-click
Type:

OnClickGroup

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>The Moveable instance
HTMLElement | SVGElementThe Moveable target
numberThe horizontal coordinate within the application's client area at which the event occurred.
numberThe vertical coordinate within the application's client area at which the event occurred.
IObject<any>Objects that can send information to the following events.
anyThe mouse or touch input event that is invoking the moveable event
Element[]targets set to group.
ElementClicked target.
booleanWhether the clicked target is on the targets set in the group.
booleanWhether the clicked target is a child of the targets set in the group.
numberThe corresponding index among the targets set as a group.
booleanWhether it is double-click
Type:

OnEndEvent

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>The Moveable instance
HTMLElement | SVGElementThe Moveable target
numberThe horizontal coordinate within the application's client area at which the event occurred.
numberThe vertical coordinate within the application's client area at which the event occurred.
IObject<any>Objects that can send information to the following events.
anyThe mouse or touch input event that is invoking the moveable event
any | undefinedThis is the last dragged event. No, if you haven't dragged.
booleanWhether this moved
booleanWhether it is double-click
Type:

OnEvent

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>The Moveable instance
HTMLElement | SVGElementThe Moveable target
numberThe horizontal coordinate within the application's client area at which the event occurred.
numberThe vertical coordinate within the application's client area at which the event occurred.
IObject<any>Objects that can send information to the following events.
anyThe mouse or touch input event that is invoking the moveable event
Type:

OnRender

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>The Moveable instance
HTMLElement | SVGElementThe Moveable target
numberThe horizontal coordinate within the application's client area at which the event occurred.
numberThe vertical coordinate within the application's client area at which the event occurred.
IObject<any>Objects that can send information to the following events.
anyThe mouse or touch input event that is invoking the moveable event
booleanWhether or not it is being pinched.
Type:

OnRenderEnd

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>The Moveable instance
HTMLElement | SVGElementThe Moveable target
numberThe horizontal coordinate within the application's client area at which the event occurred.
numberThe vertical coordinate within the application's client area at which the event occurred.
IObject<any>Objects that can send information to the following events.
anyThe mouse or touch input event that is invoking the moveable event
booleanWhether or not it is being dragged.
booleanWhether or not it is being pinched.
Type:

OnRenderGroup

Source:
Properties:
NameTypeDescription
MoveableManagerInterface<any, any>The Moveable instance
MoveableManagerInterface<any, any>
Sours: https://daybrush.com/moveable/release/latest/doc/Moveable.html

Moveable react

Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable

importMoveablefrom"moveable";constmoveable=newMoveable(document.body,{target: document.querySelector(".target"),// If the container is null, the position is fixed. (default: parentElement(document.body))container: document.body,draggable: true,resizable: true,scalable: true,rotatable: true,warpable: true,// Enabling pinchable lets you use events that// can be used in draggable, resizable, scalable, and rotateable.pinchable: true,// ["resizable", "scalable", "rotatable"]origin: true,keepRatio: true,// Resize, Scale Events at edges.edge: false,throttleDrag: 0,throttleResize: 0,throttleScale: 0,throttleRotate: 0,});/* draggable */moveable.on("dragStart",({ target, clientX, clientY })=>{console.log("onDragStart",target);}).on("drag",({ target, transform, left, top, right, bottom, beforeDelta, beforeDist, delta, dist, clientX, clientY,})=>{console.log("onDrag left, top",left,top);target!.style.left=`${left}px`;target!.style.top=`${top}px`;// console.log("onDrag translate", dist);// target!.style.transform = transform;}).on("dragEnd",({ target, isDrag, clientX, clientY })=>{console.log("onDragEnd",target,isDrag);});/* resizable */moveable.on("resizeStart",({ target, clientX, clientY })=>{console.log("onResizeStart",target);}).on("resize",({ target, width, height, dist, delta, clientX, clientY })=>{console.log("onResize",target);delta[0]&&(target!.style.width=`${width}px`);delta[1]&&(target!.style.height=`${height}px`);}).on("resizeEnd",({ target, isDrag, clientX, clientY })=>{console.log("onResizeEnd",target,isDrag);});/* scalable */moveable.on("scaleStart",({ target, clientX, clientY })=>{console.log("onScaleStart",target);}).on("scale",({ target, scale, dist, delta, transform, clientX, clientY,}: OnScale)=>{console.log("onScale scale",scale);target!.style.transform=transform;}).on("scaleEnd",({ target, isDrag, clientX, clientY })=>{console.log("onScaleEnd",target,isDrag);});/* rotatable */moveable.on("rotateStart",({ target, clientX, clientY })=>{console.log("onRotateStart",target);}).on("rotate",({ target, beforeDelta, delta, dist, transform, clientX, clientY })=>{console.log("onRotate",dist);target!.style.transform=transform;}).on("rotateEnd",({ target, isDrag, clientX, clientY })=>{console.log("onRotateEnd",target,isDrag);});/* warpable */this.matrix=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,];moveable.on("warpStart",({ target, clientX, clientY })=>{console.log("onWarpStart",target);}).on("warp",({ target, clientX, clientY, delta, dist, multiply, transform,})=>{console.log("onWarp",target);// target.style.transform = transform;this.matrix=multiply(this.matrix,delta);target.style.transform=`matrix3d(${this.matrix.join(",")})`;}).on("warpEnd",({ target, isDrag, clientX, clientY })=>{console.log("onWarpEnd",target,isDrag);});/* pinchable */// Enabling pinchable lets you use events that// can be used in draggable, resizable, scalable, and rotateable.moveable.on("pinchStart",({ target, clientX, clientY })=>{// pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStartconsole.log("onPinchStart");}).on("pinch",({ target, clientX, clientY, datas })=>{// pinch event occur before drag, rotate, scale, resizeconsole.log("onPinch");}).on("pinchEnd",({ isDrag, target, clientX, clientY, datas })=>{// pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEndconsole.log("onPinchEnd");});

The main project was made with and I used to make it lighter with umd.

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Files related to major features.

Sours: https://github.com/daybrush/moveable
How to Add Drag and Drop in React with React Beautiful DnD

import React from "react";

import ReactDOM from "react-dom";

import Moveable from "react-moveable";

import { ref } from "framework-utils";

import { Frame } from "scenejs";

import "./styles.css";

 

class App extends React.Component {

  frame = new Frame({

    width: "250px",

    height: "200px",

    left: "0px",

    top: "0px",

    transform: {

      rotate: "0deg",

      scaleX: 1,

      scaleY: 1,

      matrix3d: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

Sours: https://codesandbox.io/s

Similar news:

He was a handsome dude with a photogenic face, dark blond hair and a trendy, fashionable hairstyle. He was wearing black skinny jeans and a black T-shirt with a bright yellow "Rock" lettering all over his chest. In Sergei's manners, in his voice and intonations, there was a kind of peculiar charm and charm.

As soon as Sergey went on stage and took the microphone from the presenter, he went up to the DJ and whispered.



695 696 697 698 699