Use this library to add alignment lines, spacing blocks, adsorption to the free canvas

npm install view-line --save

Move view dom element：

import { moveByDom, resizeByDom, initLine } from 'view-line';
import 'view-line/dist/view-line.css';
moveByDom(view, top, left, function (top, left) {
    console.log(top, left);
});

Resize view dom element：

import { moveByDom, resizeByDom, initLine } from 'view-line';
import 'view-line/dist/view-line.css';
resizeByDom(view, top, left, height, width, function (top, left, height, width) {
    console.log(top, left, height, width);
});

• dom: The dom element draged
• top: The top value of the element relative to the container
• left: The left value of the element relative to the container
• onMoveEnd: Callback function for the end of the drag and drop, returning the last top and left

• dom: The dom element resized
• top: The top value of the element relative to the container
• left: The left value of the element relative to the container
• height: The height of element
• width: The width of element
• onResizeEnd: Callback function for the end of the drag and drop, returning the last top and left

Run npm run dev under sample folder

The rendering is as follows:

Alignment line:

Spacing adsorption: