js实现拖拽七夕小心心，姻缘要自己把握

                                                                                   background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg,rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
 background-size: 20px 20px;
 background-position: center center;font-size: 16px; color: black; padding: 0 10px; line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">

特殊的日子，七夕程序员怎么过呢？当然是和代码过！

据说现在姻缘已经不归月老管，归财神管，不搞钱，木的可能。

话不多说，先来一个效果图

实现思路

1. 鼠标按下时候记录当前位置
2. 鼠标移动时计算差值并与旧的值累加
3. 鼠标弹起时更新旧的值为下次移动做准备

分析过后我们需要定义三个状态

    //新的值
    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'))

总结

拖拽的关键点就是一个差值计算，注意蒙版使用和缓存旧值，否则可能会闪跳。

---

情如风雪无常，

却是一动既殇。

感谢你这么好看还来阅读我的文章，

我是冷月心，下期再见。