The Groupable feature in preact-moveable allows multiple targets to be moved, resized, scaled, rotated, or pinched as a single group. To enable group operations, pass an array of elements to the target prop instead of a single element.
Key features include:
- draggable: Move the group.
- resizable: Resize the group (Note: only one of
resizable, scalable, or warpable can be used at a time). - scalable: Scale the group.
- rotatable: Rotate the group.
- pinchable: Enables pinch gestures which can trigger drag, rotate, scale, or resize group events.
- keepRatio: When
true, maintains the width/height ratio during resize or scale operations.
import Moveable from "preact-moveable";
// Inside your render function
<Moveable
/* multiple targets */
target={[].slice.call(document.querySelectorAll(".target"))}
container={null}
origin={true}
/* draggable */
draggable={true}
onDragGroupStart={({ targets }) => {
console.log("onDragGroupStart", targets);
}}
onDragGroup={({ targets, events }) => {
events.forEach(ev => {
ev.target!.style.transform = ev.transform;
});
}}
onDragGroupEnd={({ targets, isDrag, clientX, clientY }) => {
console.log("onDragGroupEnd", targets, isDrag);
}}
/* resizable */
resizable={true}
keepRatio={true}
onResizeGroupStart={({ targets, clientX, clientY }) => {
console.log("onResizeGroupStart", targets);
}}
onResizeGroup={({ targets, direction }) => {
// Handle resize logic
}}
onResizeGroupEnd={({ targets, isDrag, clientX, clientY }) => {
console.log("onResizeGroupEnd", targets, isDrag);
}}
/* scalable */
scalable={true}
onScaleGroupStart={({ targets, clientX, clientY }) => {
console.log("onScaleGroupStart", targets);
}}
onScaleGroup={({ targets, events }) => {
events.forEach(ev => {
const target = ev.target;
target!.style.transform = ev.transform;
});
}}
onScaleGroupEnd={({ targets, isDrag, clientX, clientY }) => {
console.log("onScaleGroupEnd", targets, isDrag);
}}
/* rotatable */
rotatable={true}
onRotateGroupStart={({ targets, clientX, clientY }) => {
console.log("onRotateGroupStart", targets);
}}
onRotateGroup={({ targets, events }) => {
// Handle rotation logic
}}
onRotateGroupEnd={({ targets, isDrag, clientX, clientY }) => {
console.log("onRotateGroupEnd", targets, isDrag);
}}
/* pinchable */
pinchable={true}
onPinchGroupStart={({ targets, clientX, clientY, datas }) => {
console.log("onPinchGroupStart");
}}
onPinchGroup={({ targets, clientX, clientY, datas }) => {
console.log("onPinchGroup");
}}
onPinchGroupEnd={({ isDrag, targets, clientX, clientY, datas }) => {
console.log("onPinchGroupEnd");
}}
/>
