// 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 (
? ? ? ? ? ? 

? ? ? ? ? ? ? ? 
 this.small_down(e)} style={{ position: "absolute", left: `${this.state.translateX}px`, top: `${this.state.translateY}px` }} />
? ? ? ? ? ? 
? ? ? ? )
? ? }
};
export default Drag

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

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

? ? ? ? 
? ? ? 
?
? ? )
? }
}
export default App;