This is the 18th day of my participation in the December Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Xiaobai recently has a project in the test, bug correction at the same time also found a lot of usually did not pay attention to the details, to share with you:

Translate and scale

When the transform scale is used with translateX, the actual displacement distance of translateX is affected by the scale ratio. For example:

The transform: scale (0.5) translateX (100 px);

The actual displacement is 100px * 0.5 = 50px. If you need to calculate the displacement, remember to pay attention to the scale ratio point.

Top can also use percentage values

The problem encountered this time is that the parent element (hereinafter referred to as A) contains the child element (hereinafter referred to as A), and the height of A needs to be positioned at the bottom of A relative to A, as shown in the figure:

In this case, we only need the child element to be positioned relative to the parent element, top:100%; , can be positioned to the bottom.

My former colleague used “bottom” and gave “bottom:-20px; But the problem with element A is that its height may change to 40px as element A is dragged, so bottom:-20px; A blocks A20px. Another case is to give bottom:-40px; If the height becomes 20px, there will be A 20px gap between A and A. Therefore, it is not suitable to use bottom positioning when the height is uncertain.

The mouseUp event is not triggered

In jQuery drag events, the mouseUp event may not be triggered when the mouse is raised, causing the dragged element to stick to the mouse.

You may have encountered similar problems before. There are three common triggering scenarios:

1. When the drag event is selected, set the element to disable the selected attribute:

The user to select: none;Copy the code

2. If the browser drag event is triggered, you need to prevent bubbling and default events:

if(e.stopPropagation){
    e.stopPropagation();
}else{
    e.cancelBubble=true;
}
if(e.preventDefault){
    e.preventDefault();
}else{
    e.returnValue=false;
}
Copy the code

3. The mouse cursor moves out of the operation area, triggering the Mouseleave event. In this case, you need to listen for the Mouseleave event.

I encountered a more complex scene, need to hack, not repeat.