feat(useDrag): useDrag adds custom picture feature

packages/hooks/src/useDrag/index.ts

@@ -6,6 +6,11 @@ import useEffectWithTarget from '../utils/useEffectWithTarget';
 export interface Options {
   onDragStart?: (event: React.DragEvent) => void;
   onDragEnd?: (event: React.DragEvent) => void;
+  dragImg?: {
+    img: string | HTMLImageElement;
+    offsetX?: number;
+    offsetY?: number;
+  };
 }
 
 const useDrag = <T>(data: T, target: BasicTarget, options: Options = {}) => {
@@ -21,6 +26,17 @@ const useDrag = <T>(data: T, target: BasicTarget, options: Options = {}) => {
       const onDragStart = (event: React.DragEvent) => {
         optionsRef.current.onDragStart?.(event);
         event.dataTransfer.setData('custom', JSON.stringify(dataRef.current));
+
+        if (optionsRef.current.dragImg?.img) {
+          const { img, offsetX = 0, offsetY = 0 } = optionsRef.current.dragImg;
+          if (typeof img === 'string') {
+            const imgElement = new Image();
+            imgElement.src = img;
+            event.dataTransfer.setDragImage(imgElement, offsetX, offsetY);
+          } else {
+            event.dataTransfer.setDragImage(img, offsetX, offsetY);
+          }
+        }
       };
 
       const onDragEnd = (event: React.DragEvent) => {

packages/hooks/src/useDrop/demo/demo1.tsx

@@ -8,6 +8,7 @@
 
 import React, { useRef, useState } from 'react';
 import { useDrop, useDrag } from 'ahooks';
+import dropImg from './drop.png';
 
 const DragItem = ({ data }) => {
   const dragRef = useRef(null);
@@ -21,6 +22,9 @@ const DragItem = ({ data }) => {
     onDragEnd: () => {
       setDragging(false);
     },
+    dragImg: {
+      img: dropImg,
+    },
   });
 
   return (

packages/hooks/src/useDrop/index.en-US.md

@@ -45,6 +45,15 @@ useDrag<T>(
 | ----------- | ---------------------- | ------------------------------ | ------- |
 | onDragStart | On drag start callback | `(e: React.DragEvent) => void` | -       |
 | onDragEnd   | On drag end callback   | `(e: React.DragEvent) => void` | -       |
+| dragImg     | custom image           | `DragImgOptions`               | -       |
+
+#### DragImgOptions
+
+| 参数    | 说明                                   | 类型                         | 默认值 |
+| ------- | -------------------------------------- | ---------------------------- | ------ |
+| img     | img                                    | `string \| HTMLImageElement` | -      |
+| offsetX | the horizontal offset within the image | `number`                     | 0      |
+| offsetY | the vertical offset within the image   | `number`                     | 0      |
 
 ### useDrop
 

packages/hooks/src/useDrop/index.zh-CN.md

@@ -45,6 +45,15 @@ useDrag<T>(
 | ----------- | -------------- | ------------------------------ | ------ |
 | onDragStart | 开始拖拽的回调 | `(e: React.DragEvent) => void` | -      |
 | onDragEnd   | 结束拖拽的回调 | `(e: React.DragEvent) => void` | -      |
+| dragImg     | 自定义图像     | `DragImgOptions`               | -      |
+
+#### DragImgOptions
+
+| 参数    | 说明     | 类型                         | 默认值 |
+| ------- | -------- | ---------------------------- | ------ |
+| img     | 图片     | `string \| HTMLImageElement` | -      |
+| offsetX | 水平偏移 | `number`                     | 0      |
+| offsetY | 垂直偏移 | `number`                     | 0      |
 
 ### useDrop