Resizable

describe

For convenience, the influence of intermediate points is eliminated and only four points are used for control

const styles = {
    x: 0.y: 0.width: 100.height: 100};// Drag 10px
const distance = {
    x: 10.y: 10};// If you are dragging a point in the lower right corner, the direction is lower right
const curStyles = {
    x: 0.y: 0.width: 110.height: 110};// If you are dragging a point in the upper left corner, the direction is lower right
const curStyles = {
    x: 10.y: 10.width: 90.height: 90};Copy the code

Drag the behavior

  1. The upper left corner. X, y, width, and height all change
  2. The top right corner. X stays the same, but y, width, and height may change
  3. The lower left corner. Y stays the same, but x, width, and height may change
  4. The lower right corner. X and y stay the same, width and height change

Width and height, which cannot be negative, need to be processed. Generally, there are two processing methods: 1, 0 if less than 0; 2, take the absolute value of less than 0.

What is not hard to see here is that if we focus on different points, we need to do different things for each point

case 'Top left':
    // handle the upper-left corner
case 'Top right':
    // Handle the upper right corner
case 'Bottom left':
    // Handle the lower left corner
case 'Bottom right':
    // Handle the lower right corner
Copy the code

So one way to think about this is, how do you determine a rectangle?

  1. Top left coordinate (x, y) + width + height.

Change the upper-left coordinates (x, y), width, and height by dragging different points to match. This method of calculation is very laborious, and the logic is complicated, because the point of drag is different, the logic of change is different.

  1. Two diagonal coordinates. base(x, y) + opposite(x, y)

const getLocList = (loc) = > {
    const { x, y, width, height } = loc;

    const one = {
        x,
        y
    };
    const two = {
        x: x + width,
        y
    };
    const three = {
        x,
        y: y + height
    };
    const four = {
        x: x + width,
        y: y + height
    };

    return [one, two, three, four];
};
const list = getLocList(styles);
// Diagonal, index is the index of the point you clicked on
const [cur, opposite] = [
  list[index],
  list[dotsList.length - 1 - index],
];
Copy the code

And then the drag operation will be a lot easier demo

Moveable

demo

How does A Mouse event move from container A to container B?

Refer to the react – beautiful – DND

Both mouseover and MouseEnter can respond to incoming mouse events.

The problem is that when you drag a component, you can’t trigger mouseover and MouseEnter events

// Add this attribute to the component when mouseDownpointer-events: none;Copy the code

demo

conclusion

Demo can be optimized in many areas, such as mouseup to do related logic processing, improve performance. In a nutshell, it looks something like this.