Movement function
How do I get an element to be dragged inside its parent without going outside of its parent
1. To move the target in its parent container with a drag effect, set a movement range 2 for the target. First get the parent container's location coordinates but not including the parent container's border width and height, using clientWidth clientHeight property get 3. Get 4 offsetWidth offsetHeight after getting the placeholder coordinates of the child element including all its parts including the width and height of the border, and then add the mouse-down event to the parent container and the mouse-movement event to the child, PageX. PageY 5, get the coordinate of the child tag is the page coordinate - the parent's margin offsetLeft - the parent's border clientLeft - half 6 of the child's width, The minimum value must be 0, the maximum value is not including the border parent placeholder - all the width and height of the child 7, and finally set a mouse lift event, the mouse lift event is set to nullCopy the code
Tap switching Generally tap switching is one-to-one, which can be used to achieve tap switching
1, first style all li tags including all LI in UL OL, then add back 2, add click events to UL li through forEach loop, then delete style 3 in forEach loop, add CSS styles outside the loopCopy the code