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'))

总结
　　拖拽的关键点就是一个差值计算，注意蒙版使用和缓存旧值，否则可能会闪跳。
　　情如风雪无常，
　　却是一动既殇。
　　感谢你这么好看还来阅读我的文章，
　　我是冷月心，下期再见。