movable-resizable-js

movable-resizable-js

This project is a javascript library to facilitate movable and resizable interaction on web page. The library is provided by Tencent Real-timing Communication(TRTC) team.

Installation

#npm
npm install movable-resizable-js

#yarn
yarn add movable-resizable-js

Usage

Javascript

import { Movable, Resizable } from 'movable-resizable-js';

const targetElement = document.getElementById('movable-and-resiable');
const targetContainer = document.body;

// Enable moving
const movableController = new Movable(
    targetElement,
    targetContainer,
    {
        canExceedContainer: true, // default `false`
    }
);
movableController.on('move', (left, top) => {
    console.log('element moved to:', left, top);
});

// Enable Resizing
const resizableController = new Resizable(
    targetElement,
    targetContainer,
    {
        canExceedContainer: true, // default `false`
        keepRatio: true, // default `false`
        stopPropagation: true // default `false`. To use with `Movable` together, this option must be `true`, or else will trigger moving action too.
    }
);
resizableController.on('resize', (left, top, width, height) => {
    console.log('element resized to:', left, top, width, height);
});

CSS/SCSS/LESS

@import "movable-resizable-js/resizable.css";

// You can override default resizeble style here