<div id="app">
  
</div>              

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #f08, #d0e);
}

import React,{useState, StrictMode,useEffect} from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import {motion,useAnimationControls} from "https://esm.sh/framer-motion@8.3.3";


const btnStyle = {
  color:'white',
  fontFamily:'system-ui',
  backgroundColor:'black',
  padding:10,
  paddingLeft:32,
   paddingRight:32,
  letterSpacing:1,
  borderRadius:20,
  cursor:'pointer',
  whiteSpace:'nowrap'
}

const App = function() {
  
   const controller = useAnimationControls()
  
  return (
    <div style={{
        display:'flex',
        // flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
          gap:20,
      }}>
      <div
        style={{
          position:'relative',
            zIndex:10
        }}
        >
       <motion.div
         role='left-top'
          style={{
            height:20,
            width:20,
            borderTop:'2px black solid',
              borderLeft:'2px black solid',
            position:'absolute'
          }}
         >

       </motion.div>
         <motion.div
         role='right-bottom'
          style={{
            height:20,
            width:20,
            borderRight:'2px black solid',
            borderBottom:'2px black solid',
            position:'absolute',
            x:180,
              y:180
          }}
         >

       </motion.div>
        <motion.div
          style={{
            width:100,
            height:100,
            backgroundColor:'white',
            borderRadius:'20px',
            
          }}
          drag
          dragTransition={{
              min:0,
              max:100
            }}
          >
        </motion.div>
      </div>
    <div 
       style={{
          fontFamily:'system-ui',
            color:'white',
          textAlign:'center',
            letterSpacing:'2px',
              lineHeight:2,
            opacity:0.7,
            pointerEvent:'none'
        }}
      >
      min为0，max为100<br/>
      这个元素的拖拽被限制在了以它初始位置为依照<br/>x为0，y为0，x为200，y为200四条线形成的一个矩形内<br/>
      元素本身是100*100
    </div>
     
      
    </div>

  )
}

const container = document.querySelector("#app")
console.log(container)
const root = ReactDOM.createRoot(container)
root.render(
 <StrictMode>
    <App />
  </StrictMode>
)