js实现拖拽七夕小心心，姻缘要自己把握
特殊的日子，七夕程序员怎么过呢？当然是和代码过！
据说现在姻缘已经不归月老管，归财神管，不搞钱，木的可能。
话不多说，先来一个效果图
效果图实现思路
[*]鼠标按下时候记录当前位置
[*]鼠标移动时计算差值并与旧的值累加
[*]鼠标弹起时更新旧的值为下次移动做准备
分析过后我们需要定义三个状态
[*]
//新的值 const = useState(500) //缓存的旧值 const = useState(500) //移动初始位置 const = 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 = useState(500) const = useState(500) const = 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'))总结
拖拽的关键点就是一个差值计算，注意蒙版使用和缓存旧值，否则可能会闪跳。
情如风雪无常，
却是一动既殇。
感谢你这么好看还来阅读我的文章，
我是冷月心，下期再见。
文档来源：51CTO技术博客https://blog.51cto.com/u_14219805/3049450
页:
[1]