欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react實(shí)現(xiàn)簡(jiǎn)單的拖拽功能

 更新時(shí)間：2022年03月08日 10:53:15   作者：至_臻  
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)簡(jiǎn)單的拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了react實(shí)現(xiàn)簡(jiǎn)單的拖拽功能的具體代碼，供大家參考，具體內(nèi)容如下

src文件夾下新建文件夾demo  然后在創(chuàng)建兩個(gè)文件js和css

demo.js文件代碼

// react實(shí)現(xiàn)拖拽
import React from 'react'
// 引入css樣式
import './demo.css'
class Drag extends React.Component {
? ? constructor(props) {
? ? ? ? super(props);
? ? ? ? this.state = {
? ? ? ? ? ? translateX: 0,
? ? ? ? ? ? translateY: 0,
? ? ? ? };
? ? }
? ? small_down = (e) => {
? ? ? ? var obig = this.refs.move.parentNode;
? ? ? ? var osmall = this.refs.move;
? ? ? ? var e = e || window.event;
? ? ? ? /*用于保存小的div拖拽前的坐標(biāo)*/
? ? ? ? osmall.startX = e.clientX - osmall.offsetLeft;
? ? ? ? osmall.startY = e.clientY - osmall.offsetTop;
? ? ? ? /*鼠標(biāo)的移動(dòng)事件*/
? ? ? ? document.onmousemove = function (e) {
? ? ? ? ? ? var e = e || window.event;
? ? ? ? ? ? osmall.style.left = e.clientX - osmall.startX + "px";
? ? ? ? ? ? osmall.style.top = e.clientY - osmall.startY + "px";
? ? ? ? ? ? /*對(duì)于大的DIV四個(gè)邊界的判斷*/
? ? ? ? ? ? let x = obig.offsetWidth - osmall.offsetWidth
? ? ? ? ? ? let y = obig.offsetHeight - osmall.offsetHeight
? ? ? ? ? ? if (e.clientX - osmall.startX <= 0) {
? ? ? ? ? ? ? ? osmall.style.left = 0 + "px";
? ? ? ? ? ? }
? ? ? ? ? ? if (e.clientY - osmall.startY <= 0) {
? ? ? ? ? ? ? ? osmall.style.top = 0 + "px";
? ? ? ? ? ? }
? ? ? ? ? ? if (e.clientX - osmall.startX >= x) {
? ? ? ? ? ? ? ? osmall.style.left = x + "px";
? ? ? ? ? ? }
? ? ? ? ? ? if (e.clientY - osmall.startY >= y) {
? ? ? ? ? ? ? ? osmall.style.top = y + "px";
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? /*鼠標(biāo)的抬起事件,終止拖動(dòng)*/
? ? ? ? document.onmouseup = function () {
? ? ? ? ? ? document.onmousemove = null;
? ? ? ? ? ? document.onmouseup = null;
? ? ? ? };
? ? }
? ? componentDidMount() {
? ? }
? ? render() {
? ? ? ? return (
? ? ? ? ? ? <div className='box'>
? ? ? ? ? ? ? ? <div className='box-item' ref="move" onMouseDown={e => this.small_down(e)} style={{ position: "absolute", left: `${this.state.translateX}px`, top: `${this.state.translateY}px` }} />
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
};
export default Drag

demo.css代碼

.box{
? width: 100vw;
? height: 100vh;
? position: relative;
}
?
.box-item{
? position: absolute;
? width: 100px;
? height: 100px;
? background: pink;
}

App.js里面

import './App.css';
// 引入demo這個(gè)文件
import Drag from './demo/demo'
import React from 'react';
?
class App extends React.Component {
? constructor(props) {
? ? super(props)
? }
? render() {
? ? return (
? ? ? <div>
? ? ? ? <Drag></Drag>
? ? ? </div>
?
? ? )
? }
}
export default App;

這樣就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的拖拽了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • react 組件傳值的三種方法

    react 組件傳值的三種方法

    這篇文章主要介紹了react 組件傳值的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • react?中?mobx的使用案例詳解

    react?中?mobx的使用案例詳解

    這篇文章主要介紹了react?中?mobx的使用案例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-04-04
  • react-redux多個(gè)組件數(shù)據(jù)共享的方法

    react-redux多個(gè)組件數(shù)據(jù)共享的方法

    這篇文章主要介紹了react-redux多個(gè)組件數(shù)據(jù)共享的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • React html中使用react的兩種方式

    React html中使用react的兩種方式

    這篇文章主要介紹了React html中使用react的兩種方式,本文給大家提到了React pwa的配置代碼，給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-04-04
  • React 如何使用時(shí)間戳計(jì)算得到開始和結(jié)束時(shí)間戳

    React 如何使用時(shí)間戳計(jì)算得到開始和結(jié)束時(shí)間戳

    這篇文章主要介紹了React 如何拿時(shí)間戳計(jì)算得到開始和結(jié)束時(shí)間戳,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-09-09
  • 使用react-activation實(shí)現(xiàn)keepAlive支持返回傳參

    使用react-activation實(shí)現(xiàn)keepAlive支持返回傳參

    本文主要介紹了使用react-activation實(shí)現(xiàn)keepAlive支持返回傳參，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-05-05
  • React如何實(shí)現(xiàn)Vue的watch監(jiān)聽屬性

    React如何實(shí)現(xiàn)Vue的watch監(jiān)聽屬性

    在 Vue 中可以簡(jiǎn)單地使用 watch 來監(jiān)聽數(shù)據(jù)的變化，還能獲取到改變前的舊值，而在 React 中是沒有 watch 的，今天通過本文給大家講解React實(shí)現(xiàn)Vue的watch監(jiān)聽屬性的方法,需要的朋友可以參考下
    2023-06-06
  • React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼

    React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼

    這篇文章主要介紹了React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • React實(shí)現(xiàn)卡片拖拽效果流程詳解

    React實(shí)現(xiàn)卡片拖拽效果流程詳解

    這篇文章主要介紹了React Web開發(fā)實(shí)戰(zhàn)示例，實(shí)現(xiàn)卡片拖拽效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2022-11-11
  • react-router JS 控制路由跳轉(zhuǎn)實(shí)例

    react-router JS 控制路由跳轉(zhuǎn)實(shí)例

    這篇文章主要介紹了react-router JS 控制路由跳轉(zhuǎn)實(shí)例，react實(shí)現(xiàn)路由可以直接使用react-router。有興趣的可以了解一下
    2017-06-06

最新評(píng)論