crazypixel

const handleDragEnd = useCallback(() => {
  setState(state => ({
    ...state,
    order: state.dragOrder,
    draggedIndex: null
  }));
}, []);

crazypixel

const handleDrag = useCallback(({translation, id}) => {
  const delta = Math.round(translation.y / HEIGHT);
  const index = state.order.indexOf(id);
  const dragOrder = state.order.filter(index => index !== id);

  if (!inRange(index + delta, 0, items.length)) {
    return;
  }

  dragOrder.splice(index + delta, 0, id);

crazypixel

const translation = {
  x: clientX - state.origin.x, 
  y: clientY - state.origin.y
};

crazypixel

const styles = useMemo(() => ({
  cursor: state.isDragging ? '-webkit-grabbing' : '-webkit-grab',
  transform: `translate(${state.translation.x}px, ${state.translation.y}px)`,
  transition: state.isDragging ? 'none' : 'transform 500ms',
  zIndex: state.isDragging ? 2 : 1,
  position: state.isDragging ? 'absolute' : 'relative'
}), [state.isDragging, state.translation]);

crazypixel

import React, {useState, useCallback} from 'react';
import styled from 'styled-components';
import {range, inRange} from 'lodash';
import Draggable from './Draggable';

const MAX = 5;
const HEIGHT = 80;

const App = () => {
  const items = range(MAX);

crazypixel

import React, {useState, useCallback, useMemo, useEffect} from 'react';

const POSITION = {x: 0, y: 0};

const Draggable = ({children, id, onDrag, onDragEnd}) => {
  const [state, setState] = useState({
    isDragging: false,
    origin: POSITION,
    translation: POSITION
  });

crazypixel

import React from 'react';
import Draggable from './Draggble';

const App = () => {
  return (
    <div>
      <Draggable onDrag={console.log} id="uniqueId">
        <h2>Drag me</h2>
      </Draggable>
    </div>

crazypixel

import React from 'react';
import styled, { css } from 'styled-components';

export default class Draggable extends React.Component {
  state = {
    isDragging: false,

    originalX: 0,
    originalY: 0,

crazypixel

http://bit.ly/500course

ES2015 Playground - http://mikelambert.me/es6/
Course PPT - https://www.slideshare.net/secret/83Amj6pr7ExOrb
Cheatsheet - https://ihatetomatoes.net/wp-content/uploads/2017/01/react-cheat-sheet.pdf


First use git
git config --global user.name "Mona Lisa"
git config --global user.email "foo@bar.com"