-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(useDrag): useDrag adds custom picture feature (#2182)
* feat(useDrag): add dragImg * feat(useDrag): update useDrag-dragImg doc * feat(useDrag): 优化部分代码 * refactor(useDrag): 参数命名修改,修复第一次拖动图片未加载的问题 * docs(useDrag): fix image option desc * style: format & rename & remove log * docs: uniform word * docs: reset demo1 * docs: add demo2 * Update packages/hooks/src/useDrop/index.zh-CN.md Co-authored-by: 云泥 <1656081615@qq.com> * Update packages/hooks/src/useDrop/index.en-US.md --------- Co-authored-by: liuyib <1656081615@qq.com>
- Loading branch information
Showing
4 changed files
with
103 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
/** | ||
* title: Customize Image | ||
* desc: Customize image that follow the mouse pointer during dragging. | ||
* | ||
* title.zh-CN: 自定义拖拽图像 | ||
* desc.zh-CN: 自定义拖拽过程中跟随鼠标指针的图像。 | ||
*/ | ||
|
||
import React, { useRef } from 'react'; | ||
import { useDrag } from 'ahooks'; | ||
|
||
const COMMON_STYLE: React.CSSProperties = { | ||
border: '1px solid #e8e8e8', | ||
height: '50px', | ||
lineHeight: '50px', | ||
padding: '16px', | ||
textAlign: 'center', | ||
marginRight: '16px', | ||
}; | ||
|
||
export default () => { | ||
const dragRef = useRef(null); | ||
|
||
useDrag('', dragRef, { | ||
dragImage: { | ||
image: '/logo.svg', | ||
}, | ||
}); | ||
|
||
return ( | ||
<div ref={dragRef} style={{ display: 'flex' }}> | ||
<img style={COMMON_STYLE} src="/simple-logo.svg" /> | ||
<div style={COMMON_STYLE}>drag me</div> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters