本文实例为大家分享了react实现简单的拖拽功能的具体代码,供大家参考,具体内容如下
src文件夹下新建文件夹demo 然后在创建两个文件js和cssdemo
本文实例为大家分享了react实现简单的拖拽功能的具体代码,供大家参考,具体内容如下
src文件夹下新建文件夹demo 然后在创建两个文件js和css
demo.js文件代码
// react实现拖拽 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拖拽前的坐标*/ osmall.startX = e.clientX - osmall.offsetLeft; osmall.startY = e.clientY - osmall.offsetTop; /*鼠标的移动事件*/ 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"; /*对于大的DIV四个边界的判断*/ 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"; } }; /*鼠标的抬起事件,终止拖动*/ 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这个文件 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;
这样就可以实现一个简单的拖拽了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持好代码网。