Drag and Drop List with React

리액트로 Drag and drop 만들기

by Chill_bi

HTML

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root"></div>

SCSS

* {
  padding: 0;
  margin: 0;
}

.App {
  background-color: black;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  ul {
    width: 300px;
    list-style: none;
    
    li {
      cursor: grab;
      padding: 10px 15px;
      
      &.grabbing {
        cursor: grabbing;
      }
    }
  }
}

React

const _SocialNetworks = [
	{title: "Twitter", color: "white", backgroundColor: "Red"},
	{title: "Facebook", color: "black", backgroundColor: "Orange"},
	{title: "Line", color: "black", backgroundColor: "Yellow"},
	{title: "Instagram", color: "white", backgroundColor: "Green"},
	{title: "Telegram", color: "white", backgroundColor: "Blue"},
	{title: "KaKao", color: "white", backgroundColor: "DarkBlue"},
	{title: "LinkedIn", color: "white", backgroundColor: "Purple"},
]

const App = () => {
  const [ lists, setLists ] = React.useState(_SocialNetworks);
  
  return (
    <div className='App'>
      <ul className='List'>
        {
          lists.map((sns, index) => (
            <li
              draggable
              style={{
                backgroundColor: sns.backgroundColor,
                color: sns.color,
                fontSize: "bold"
              }}
            >
              {sns.title}
            </li>
          ))
        }
      </ul>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector("#root"))