Drag and Drop List Sortable

by Chill_bi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/17.0.1/umd/react-is.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/styled-components.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;
      }
      
      &.move_up {
        transform: translate(0, -41px)
      }
      
      &.move_down {
        transform : translate(0, 41px);
      }
    }
  }
}

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);
    const [ grab, setGrab ] = React.useState(null);
    
    React.useEffect(() => {}, [grab]);

    const _onDragOver = e => {
        e.preventDefault();
    }

    const _onDragStart = e => {
        setGrab(e.target);
        e.target.classList.add("grabbing");
        e.dataTransfer.effectAllowed = "move";
        e.dataTransfer.setData("text/html", e.target);
    }

    const _onDragEnd = e => {
        e.target.classList.remove("grabbing");
        e.dataTransfer.dropEffect = "move";
        setGrab(null);
    }

    const _onDrop = e => {
        let grabPosition = Number(grab.dataset.position);
        let targetPosition = Number(e.target.dataset.position);

        let _list = [ ...lists ];
        _list[grabPosition] = _list.splice(targetPosition, 1, _list[grabPosition])[0];

        setLists(_list);
    }
    
    const _onDragEnter = e => {
    		let grabPosition = Number(grab.dataset.position);
        let targetPosition = Number(e.target.dataset.position);
        
        if(grabPosition < targetPosition) e.target.classList.add("move_up");
        else if(grabPosition > targetPosition) e.target.classList.add("move_down");
    }
		const _onDragLeave = e => {
        e.target.classList.remove("move_up");
        e.target.classList.remove("move_down");
    }

    return (
        <div className='App'>
            <ul className='List'>
                {
                   ...