【HarmonyOS Next 自定义可拖拽image】

效果图：

代码：

import display from "@ohos.display"
import {
    AppUtil } from "@pura/harmony-utils"

/**
 * 自定义可拖拽图标组件
 */
@Component
export default struct DraggableImage {
   
  imageResource?: Resource
  imageHeight: number = 50 //单位：vp
  imageWidth: number = 50 //单位：vp

  //图标初始位置，默认在左上角
  startLocationX:number = 0
  startLocationY:number = 0
  
  marginLeft:number = 0
  marginRight:number = 0
  marginTop:number = 0
  marginBottom:number = 0
 

  @State private offsetX: number = 0
  @State private offsetY: number = 0
  @State private positionX: number = 0
  @State private positionY: number = 0
  //屏幕宽
  private screenWidth: number = 0
  private screenHeight: number = 0
  // 定义贴边的阈值（距离边缘多少像素时触发贴边）
  private snapThreshold: number = 50; //单位：vp

  aboutToAppear(): void {
   
    this.screenWidth = px2vp(display.getDefaultDisplaySync().width)-this.marginRight
    this.screenHeight = px2vp(display.getDefaultDisplaySync().height - AppUtil.getStatusBarHeight() - AppUtil.