Angular拖拽元素跨屏幕渲染位置偏移问题求助

Alright, let's figure out why your dragged elements are drifting slightly when rendering across different screens. After going through your code, here are the key issues and actionable fixes to get precise positioning working as expected:

1. Fix the Padding Interference in Coordinate Calculation #

Your upload-time .dropzone has padding: 20px, but when you calculate positions using getBoundingClientRect(), you're not accounting for this padding. The top/left of absolute-positioned elements is relative to the container's content box (excluding padding), but getBoundingClientRect() returns dimensions including padding and borders. This mismatch causes offset.

Update your TypeScript drag end logic to subtract padding from the mouse coordinates and calculate against the container's usable content area:

onDragEnd(event,b){ 
  const existingMovingBlockIndex = this.existingDroppedItemZoneIn.indexOf(this.currentBox); 
  if(existingMovingBlockIndex>-1){ 
    const container_rect = this.parentparent.nativeElement.getBoundingClientRect();
    // Get computed padding values from the container
    const containerStyle = getComputedStyle(this.parentparent.nativeElement);
    const paddingLeft = parseFloat(containerStyle.paddingLeft);
    const paddingTop = parseFloat(containerStyle.paddingTop);
    const paddingRight = parseFloat(containerStyle.paddingRight);
    const paddingBottom = parseFloat(containerStyle.paddingBottom);

    // Adjust mouse position to exclude container padding
    this.mouse.x = event.clientX - container_rect.left - paddingLeft;
    this.mouse.y = event.clientY - container_rect.top - paddingTop;

    // Calculate usable width/height (total size minus padding)
    const usableWidth = container_rect.width - paddingLeft - paddingRight;
    const usableHeight = container_rect.height - paddingTop - paddingBottom;

    // Calculate percentage positions
    const perc_x = (this.mouse.x / usableWidth) * 100;
    const perc_y = (this.mouse.y / usableHeight) * 100;

    // Offset for element center alignment (since your box is 10% wide/tall)
    const elementHalfWidthPerc = 5; // 10% / 2
    const elementHalfHeightPerc = 5;
    this.left = perc_x - elementHalfWidthPerc;
    this.top = perc_y - elementHalfHeightPerc;

    // Save the corrected offset values, not the raw perc_x/perc_y
    this.existingDroppedItemZoneIn[existingMovingBlockIndex].spans[0] = this.left;
    this.existingDroppedItemZoneIn[existingMovingBlockIndex].spans[1] = this.top;
  } 
}

Also, ensure your render-time container (<li>) uses the same padding as the upload container, or remove padding entirely from both to eliminate this variable.

2. Unify Element Dimensions & Box Model #

Your upload-time .box uses percentage dimensions (10%), but the render-time .fs-heatmap-wrapper__content__box uses fixed pixels (100px). This breaks the percentage positioning alignment. Additionally, margin:5px adds extra offset that isn't accounted for in your calculations.

Update your render-time CSS to match the upload-time element styles, and add box-sizing: border-box to ensure borders don't expand the element's size:

.fs-heatmap-wrapper__content__box{
  width: 10%; /* Match upload-time .box width */
  height: 10%; /* Match upload-time .box height */
  background: rgba(254, 249, 247, 1);
  border: 1.5px solid #e24301;
  margin: 0; /* Remove margin to avoid unaccounted offset */
  line-height: 100%; /* Use percentage for flexible vertical alignment */
  text-align: center;
  font-size: 0.8rem;
  box-sizing: border-box; /* Include border in width/height calculation */
}

Add box-sizing: border-box to your upload-time .box CSS too:

.box {
  width: 10%;
  height: 10%;
  background: rgba(254, 249, 247, 1);
  border: 1.5px solid #e24301;
  margin: 0; /* Remove margin here too */
  line-height: 100%;
  text-align: center;
  font-size: 0.8rem;
  box-sizing: border-box;
}

3. Maintain Background Image Aspect Ratio #

If your container's aspect ratio doesn't match the background image's ratio, background-size: 100% 100% will stretch the image, making element positions look offset relative to the background. Fix this by using a padding-top trick to lock the container to the image's aspect ratio.

For example, if your background image is 1920px wide and 1080px tall (16:9 ratio), set padding-top: 56.25% (1080/1920 * 100) and set height: 0 on the container:

Upload-time container update: #

<div id="toget" class="dropzone" 
  [ngStyle]="{
    'width':'100%', 
    'background-image': 'url('+urlFloorZoneIn+')', 
    'background-repeat': 'no-repeat', 
    'background-position': 'center', 
    'background-size': '100% 100%', 
    'border':'1px solid black', 
    'position': 'relative',
    'padding-top': 'calc(340px / 原始背景图宽度 * 100%)', /* Replace with your image's height/width ratio */
    'height': '0'
  }">
  <!-- Your draggable boxes here -->
</div>

Render-time container update: #

<li #allFloors *ngFor="let floor of buildings.floors" 
  [ngStyle]="{
    'width': singleFloorFlagStyle ?'40%':'100%', 
    'background-image': 'url('+floor.urlFloorZoneIn+')', 
    'background-repeat': 'no-repeat', 
    'background-position': 'center', 
    'background-size': '100% 100%', 
    'border':'1px solid black', 
    'position': 'relative', 
    'max-width': '80%',
    'padding-top': 'calc(340px / 原始背景图宽度 * 100%)', /* Same ratio as upload container */
    'height': '0'
  }" 
  [ngClass]="{'width':'80% !important'}">
  <!-- Your rendered boxes here -->
</li>

This ensures the container always matches the background image's aspect ratio, so percentage positions stay aligned perfectly.

4. Fix the Position Storage Bug #

In your original TS code, you calculated this.left = perc_x-5 and this.top = perc_y-5 (to center the element on the mouse), but then stored the raw perc_x/perc_y values instead of the corrected offsets. This is a direct cause of the offset issue—make sure you save the adjusted this.left and this.top values to your spans array, as shown in the first code fix above.

内容的提问来源于stack exchange，提问作者Enthu