react组件许愿墙-图片拖拽

No DeBug

已于 2023-09-06 08:13:23 修改

阅读量207

点赞数 1

分类专栏： react案例文章标签： react.js javascript ecmascript

于 2023-06-20 21:28:10 首次发布

本文链接：https://blog.csdn.net/m0_71955188/article/details/131315775

版权

react案例专栏收录该内容

8 篇文章 0 订阅

订阅专栏

# 文件目录

# App.js

import logo from './logo.svg';
import './App.css';
import {useRoutes} from 'react-router-dom'
import routes from './routers/index'
function App() {
  let element=useRoutes(routes)
  return (
    <div className="App">
      {element}
    </div>
  );
}

export default App;

# App.css

html,body,#root,.app{
  width: 100%;
  height: 100%;

}
#root >div{
  width: 100%;
  height: 100%;
}
*{
  margin: 0;
  padding: 0;
}

# Home组件下index.jsx

import React, { useState,useCallback, useEffect } from 'react'
import Img1 from '../../static/05cdfeafe26bd44bcc885b07fb0b0ea.jpg'
import Img2 from '../../static/2154aedce61e9a7e797bdb9fc7668c1.jpg'
import Img3 from '../../static/4bd063b4f5a37eb78dfb5bbf74823b8.jpg'
import Img4 from '../../static/6e3d15a60f188e83e06685e022e70f3.jpg'
import Img5 from '../../static/affb32d4429a0af2974bf11a6956061.jpg'
import './index.css'
export default function Index() {
    let [wish,setwish]=useState("")
    let imgs=[Img1,Img2,Img3,Img4,Img5]
    let [imgurl,setimgurl]=useState('')
    let [cku,setcku]=useState(false)
  return (
    <div className='home'>
        <div className='home1'>
        <h3>许愿墙</h3>

        </div>

    <div className='top'>
        <input className="inp" type="text" value={wish} onChange={(e)=>{
            let val=e.target.value
            setwish(val)
        }}  placeholder='输入你的心愿'/><hr/>
    </div>
    <div className='imgs'>
        {imgs.map((item,index)=>{
            return <img className='imgss' onClick={(e)=>{
                let target=e.target
                let imgs=document.querySelectorAll('.imgss')
                for (let index = 0; index < imgs.length; index++) {
                    const element = imgs[index];
                    element.style=''
                    
                }
                target.style.border='1px solid red'
                console.log(target.src);
                setimgurl(target.src)
                setcku(true)
                
            }} src={item} key={index} alt="" />
        })}
    </div>
    <div className='btn'>
        {cku?<button onClick={()=>{
            var maxW = document.documentElement.clientWidth;
            var maxH = document.documentElement.clientHeight;
            let topH=document.querySelector('.withs').clientHeight
            let topW=document.querySelector('.withs').clientWidth
            document.querySelector('.withs').style.width = maxW;
            // document.querySelector('.withs').style.height = maxH;
            var startX = 0;
    var startY = 0;
            let formbox=document.querySelector('.withs')
            let divbox=document.createElement('div')
            divbox.className='targets'
            let btn=document.createElement('button')
            btn.innerText='x'
            btn.addEventListener("click",(e)=>{
                let target=e.target
                let parent = target.parentNode;
                formbox.removeChild(parent)
            })
            divbox.innerText=wish
            console.log(maxW,topH,'xx');
            
            
            divbox.style.left=Math.floor(Math.random()*100*(Math.floor(topW/100)))+'px'
            divbox.style.top=Math.floor(Math.random()*100*(Math.floor(topH/100)))+'px'
           
            
            divbox.style.backgroundImage=`url(${imgurl})`
            divbox.style.backgroundPosition='center center'

            divbox.appendChild(btn)
            divbox.addEventListener('touchstart',function(e){
                console.log(111);
                
                startX = e.targetTouches[0].pageX - this.offsetLeft;
                startY = e.targetTouches[0].pageY - this.offsetTop;
            })
            divbox.addEventListener('touchmove',function(e){
                var leftX = e.targetTouches[0].pageX - startX;
                var topY = e.targetTouches[0].pageY - startY;
                var thisW = e.targetTouches[0].target.clientWidth;
                var parentW = e.targetTouches[0].target.offsetParent.clientWidth;
                var thisH = e.targetTouches[0].target.clientHeight;
                var parentH = e.targetTouches[0].target.offsetParent.clientHeight;
    
                if(leftX <= 0){
                    leftX = 0;
                }
    
                if(leftX >= parentW - thisW){
                    leftX = parentW - thisW;
                }
    
                if(topY <= 0){
                    topY = 0;
                }
                
                if(topY >= parentH - thisH){
                    topY = parentH - thisH;
                }
                if(topY>=441){
                    topY=441
                }
    
                this.style.left = leftX + 'px';
                this.style.top = topY + 'px';
               
            })
            formbox.appendChild(divbox)
            console.log(formbox);
            
        }}>许愿</button>:<button>我在想想</button>}
        
    </div>
    <div className='withs'>

    </div>
</div>
  )
}

# Home组件下index.css

.home {
  width: 100%;
  height: 100%;
}
.home .top {
  width: 100%;
  height: 5%;
  /* background-color: red; */
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.home .top input {
  outline: none;
  padding-left: 15px;
  border: 1px solid black;
  width: 100%;
}
.home .imgs {
  width: 100%;
  height: 10%;
  /* background-color: hotpink; */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 30px;
}
.home .imgs img {
  width: 50px;
  height: 50px;
}
.withs {
  width: 100%;
  height: 64%;
  background-color:aqua;
  display: flex;
  position: relative;
}
.withs div {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  position: absolute;
}
.withs div button {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.home1 h3{
  font-size: 20px;
  text-align: center;
  padding-top:18px ;
  background-color: blueviolet;
  height: 50px;
}
.inp{
  width: 80%;
  height: 30px;
  border-radius: 10px;
  margin-top: 15px;
}
.btn{
  width: 30px;
  height: 20px;
  margin: 0 auto;
  margin-bottom: 25px;
  /* background-color: red; */
}

# login组件下index.jsx

import React, { useState } from 'react'
import {
    Form,
    Input,
    Button,
    Dialog,
    TextArea,
    DatePicker,
    Selector,
    Slider,
    Stepper,
    Switch,
  } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import './index.css'
export default function Index() {
    let Navigate=useNavigate()
    let [code,sttcode]=useState("")
    let [user,setuser]=useState({
        phone:"",
        code:""
    })
    let timer=null
    let checkphone=(_, value) => {
        let phone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
        if (value == '') {
          return Promise.reject(new Error('手机号不可为空！'));
        } else {
          if (phone.test(value)) {
            return Promise.resolve();
          } else {
            return Promise.reject(new Error('请输入正确的手机号'));
          }
        }
      };
    let checkcode=(_, value)=>{
        if (value == '') {
            return Promise.reject(new Error('验证码不可以为空'));
        }else if(value!=code){
            return Promise.reject(new Error('验证码错误'));
        }else{
            return Promise.resolve();
        }
    }
    let generateCode=()=>{
        const code = String(Math.floor(Math.random() * 1000000)).padEnd(6, '0')
        console.log(code);
        
        sttcode(code)
        
    }
    let sendcode=(e)=>{
        let sec = 60;
        timer = setInterval(function () {
          var btn = e.target;
          sec--;
          btn.innerHTML = `<span>重新发送(${sec})</span>`;
          
          if (sec == 0) {
            clearInterval(timer); // 清除定时器
            btn.innerHTML = '<span>重新发送</span>'; // 设置按钮文本
          }
        }, 1000);
        generateCode()
    }
    let onFinish=(val)=>{
        console.log(val);
        localStorage.setItem('token',JSON.stringify(val))
        Navigate('/home')

        
    }
  return (
    <div className='loginbox'>
    <div className='formbox'>
    <Form
    layout='horizontal'
    onFinish={onFinish}
    footer={
      <Button block type='submit' color='primary' size='large'>
        提交
      </Button>
    }
  >
    <Form.Item
      name='phone'
      label='账号'
      rules={[{ required: true, },{validator: checkphone}]}
    >
      <Input onChange={(val)=>{
        user.phone=val
        setuser(user)
      }} value={user.phone} placeholder='请输入姓名' />
    </Form.Item>
    <Form.Item
      name='code'
      label='验证码'
      rules={[{ required: true},{validator: checkcode}]}
      extra={<a onClick={sendcode}>发送验证码</a>}
    >
      <Input onChange={(val)=>{
        user.code=val
        setuser(user)
      }} value={user.code} placeholder='请输入姓名' />
    </Form.Item>
    
   
   
  </Form>
    </div>
</div>
  )
}

# Login组件下index.css

.loginbox {
  width: 100%;
  height: 100%;
  position: relative;
}
.loginbox .formbox {
  width: 100%;
  height: 30%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}