js实现拖拽七夕小心心，姻缘要自己把握
js实现拖拽七夕小心心，姻缘要自己把握
-
- js实现拖拽七夕小心心，姻缘要自己把握
-
- 实现思路
- 源码
- 总结
js实现拖拽七夕小心心，姻缘要自己把握
特殊的日子，七夕程序员怎么过呢？当然是和代码过！
据说现在姻缘已经不归月老管，归财神管，不搞钱，木的可能。
话不多说，先来一个效果图
实现思路
- 鼠标按下时候记录当前位置
- 鼠标移动时计算差值并与旧的值累加
- 鼠标弹起时更新旧的值为下次移动做准备
分析过后我们需要定义三个状态
//新的值
const [width, setWidth] = useState(500)
//缓存的旧值
const [resize, setResize] = useState(500)
//移动初始位置
const [start, setStart] = useState(-1)
鼠标按下事件处理逻辑:记录当前位置
<div style={
{
width: width + 'px',
height: 200,
minWidth: 500,
border: '1px solid #dedede',
margin: 100,
cursor: 'e-resize'
}}
onMouseDown={
(e) => {
setStart(e.clientX)
}}
/>
鼠标移动时:计算差值并与旧的值累加
<div style={
{
width: width + 'px',
height: 200,
minWidth: 500,
border: '1px solid #dedede',
margin: 100,
cursor: 'e-resize'
}}
onMouseDown={
(e) => {
setStart(e.clientX)
}}
onMouseMove={
(e) => {
if (start !== -1) {
let w = resize + e.clientX - start
setWidth(w)
}
}}
/>
鼠标弹起时:更新旧的值,为下次移动做准备
<div style={
{
width: width + 'px',
height: 200,
minWidth: 500,
border: '1px solid #dedede',
margin: 100,
cursor: 'e-resize'
}}
onMouseDown={
(e) => {
setStart(e.clientX)
}}
onMouseMove={
(e) => {
if (start !== -1) {
let w = resize + e.clientX - start
setWidth(w)
}
}}
>
// 为了防止拖动时滑出感应区域，可以定义一个蒙版
{
start !== -1 && <div
onMouseUp={
() => {
if (start !== -1) {
setStart(-1)
setResize(width)
}
}
}
style={
{
position: 'fixed',
left: '0',
top: '0',
width: '100%',
height: '100%',
}}
/>}
// 添加小心心
<svg t="1587910011145" className="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1253" width="100%" height="100%"
fill='pink'
>
<path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0
186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064
396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0
128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072
677.51936 192.03072z" p-id="1254"
></path>
</svg>
</div>
源码
import React, {
useState } from 'react'
import ReactDom from 'react-dom'
function App() {
const [width, setWidth] = useState(500)
const [resize, setResize] = useState(500)
const [start, setStart] = useState(-1)
return (
<div style={
{
width: width + 'px',
height: 200,
minWidth: 500,
border: '1px solid #dedede',
margin: 100,
cursor: 'e-resize'
}}
onMouseDown={
(e) => {
setStart(e.clientX)
}}
onMouseMove={
(e) => {
if (start !== -1) {
let w = resize + e.clientX - start
setWidth(w)
}
}}
>
{
start !== -1 && <div
onMouseUp={
() => {
if (start !== -1) {
setStart(-1)
setResize(width)
}
}
}
style={
{
position: 'fixed',
left: '0',
top: '0',
width: '100%',
height: '100%',
}}
/>}
<svg t="1587910011145" className="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1253" width="100%" height="100%"
fill='pink'
>
<path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0
186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064
396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0
128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072
677.51936 192.03072z" p-id="1254"
></path>
</svg>
</div>
)
}
ReactDom.render(<App />, document.getElementById('root'))
总结
拖拽的关键点就是一个差值计算，注意蒙版使用和缓存旧值，否则可能会闪跳。
情如风雪无常，
却是一动既殇。
感谢你这么好看还来阅读我的文章，
我是冷月心，下期再见。