The target
PC
Type of listening event used
- mousedown
- mouseover
- mouseup
Train of thought
- Make points, each containing its own row and column number
- The template loop shows the element corresponding to each point, and each element adds the row and column number of the point as a custom attribute (convenient for event delegation)
If you bind each element to a listener event, you need to add rows * columns * 3 Listeners, and the page performance is poor
- Perform the above event listening on the parent container, get the row and column numbers corresponding to the start and end points, and then calculate the contained cells between the two points according to the business needs
The source address
Mobile terminal
Type of listening event used
- touchstart
- touchmove
- touchend
Train of thought
Since the touchMove process always corresponds to the element that triggers TouchStart, it cannot get the element corresponding to the current mouse position (therefore, it cannot directly get the custom attribute bound to the element), so there is another way to think about it. Calculates the current mouse point based on the relative pixel position of the mouse from the parent element
- Make points. Each point contains its own row number, column number, and the position of the upper-left corner relative to the parent container x,y
- The template iterates through the elements corresponding to each point
- Perform the above event listening on the parent container, obtain the corresponding row and column numbers by mouse position, and then calculate the contained cells between the two points according to the business needs
The source address
Due to codepen. IO, mobile phone cannot be simulated, so you need to copy the code to the local vue2 development environment for viewing