拖拽默认复制隐藏 使用空白Canvas实现隐藏拖拽反馈图像

### 使用空白Canvas实现拖拽反馈图像

在Web应用程序中，实现拖拽功能时，通常会使用拖拽反馈图像来指示用户正在拖拽的对象。本文将介绍如何使用空白Canvas作为拖拽反馈图像，并在拖拽过程中更新元素位置信息。

#### HTML结构

在HTML中，我们有一个包含拖拽元素的div，以及一个隐藏的空白Canvas。拖拽元素具有可拖拽属性，以便用户可以拖动它。

```html

<div class="logo" *ngIf="showLogo" #auditLogo draggable="true" dropzone="move" (dragstart)="onDragStart($event)" (drag)="onDrag($event)" (dragend)="onDragEnd($event)">
    <div class="logo-box">
        <i nz-icon nzType="close" nzTheme="outline" (click)="hiddenLogo()"></i>
        <img src="logo.png" alt="">
    </div>
</div>
<canvas id="myCanvas" height="0"></canvas>

#### TypeScript逻辑

在TypeScript中，我们定义了拖拽开始、拖拽过程和拖拽结束的事件处理函数。在拖拽开始时，我们使用空白Canvas作为拖拽反馈图像，并设置拖拽数据。在拖拽过程中，我们更新拖拽元素的位置信息。在拖拽结束时，我们保存拖拽元素的最终位置。```typescript

ngOnInit(): void {
    const position = this.getItem('logo');
    if (position) {
      setTimeout(() => {
        this.updateElementStyle(position);
      }, 50);
    }
  }

  hiddenLogo() {
    this.showLogo = false;
    this.removeItem('logo');
  }

onDragStart($event: any) {
    const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
    
    // 设置Canvas的宽度和高度
    canvas.width = 5;
    canvas.height = 3;
    
    // 获取2D上下文
    var ctx = canvas.getContext('2d');
    
    if (ctx) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    // 如果你想要设置Canvas的背景为透明，可以使用下面这行代码
    canvas.style.backgroundColor = 'transparent';
  
    var dt = $event.dataTransfer;
    dt.setData("text/plain", "");
    dt.setDragImage(canvas, 25, 25);
}

onDrag($event: any) {
    const x = $event.clientX;
    const y = $event.clientY;
    if (x !== 0 && y !== 0) {
        this.updateElementStyle({x: x, y: y});
    }
}

onDragEnd($event: any) {
    const x = $event.clientX;
    const y = $event.clientY;
    this.savePosition({x: x, y: y});
}

updateElementStyle(data: {x: number, y: number}) {
    const element = document.querySelector('.logo') as HTMLElement;
    element.style.left = `${data.x}px`;
    element.style.top = `${data.y}px`;
}

savePosition(value: {x: number, y: number}) {
    localStorage.setItem('logo', JSON.stringify(value));
}

getItem(key: string) {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : null;
}

removeItem(key: string) {
    localStorage.removeItem(key);
}

#### CSS样式

CSS样式用于定义拖拽元素的外观和动画效果。

```scss

:host {
    .logo {
        position: fixed;
        right: 20px;
        top: 20%;
        width: 102px;
        height: 102px;
        background-color: #fff;
        padding: 18px 22px;
        border-radius: 18px;
        box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.05);
        z-index: 10000;
        cursor: move;
        transition: transform 0.3s ease-in-out; /* 平滑过渡效果 */
        transform-origin: center; /* 设置变换的中心点为中心 */
        user-select: none;
    }
    .logo:hover {
        transform: scale(1.4); /* 悬停时放大1.1倍 */
    }
    .logo-box {
        position: relative;
        i {
            position: absolute;
            top: -15px;
            right: -15px;
            font-size: 14px;
            cursor: pointer;
        }
        img {
            width: 100%;
            display: block;
        }
    }
}

#### 总结

通过使用空白Canvas作为拖拽反馈图像，我们实现了在拖拽过程中更新元素位置信息的功能。这种方法可以让用户在拖拽过程中获得更直观的反馈，同时保持了界面的简洁和易用性。