Drag and Drop

Hero/Intro section: Interactive elements

Features

  • Draggable with a pointer
  • Keyboard use: dropdown list
  • Can be rearranged within their container
  • State saved in localStorage
  • Categories can be renamed
  • New colors can be added and removed
  • You may also add other words for generic use. Tip: if you add a generic word, you can color the card by writing a color name last, e.g. "apple pink" or apple rgb(218,112,214) with no spaces in the color. This will result in a pink card with "apple" written on it.
  • New: Also works with HEX colors, ie. #fff or #123abc or RGB or HSL values
  • New: You may edit the color and text later from the dropdown menu on the card by clicking the drag handle.
  • New: Set custom background colors
  • New: You may edit the background color of a single container through the menu on the container header.

Instructions

Pointer and Touch Use

  • Hold pointer button down to drag an item from one container to another, or rearrange within a container
  • On touch devices, hold touch for a moment to activate drag
  • You may also use the item menu to choose a destination:

Keyboard use

  • Move items within their container with the Up or Down arrow keys
  • To move items to another container:
    • use TAB-key to navigate to drag button and press Enter key to open menu
    • With the menu open, use TAB-key to navigate and choose the new destination with Enter or Space key
Github

Drag and Drop

Sort the colors to a different container or organize them within their container

Do
Do
    Doing
    Doing
      Done
      Done

        Set custom background colors

        Tip: You may edit the background color of a single container through the menu on the container header.

        Add a text/color

        for example: "darkblue" or "slategray". You may also add other words for generic use. Tip: if you add a generic word, you can color the card by writing a color name last, e.g. "apple pink" or apple rgb(218,112,214) with no spaces in the color. This will result in a pink card with "apple" written on it.

        Select category

        Need help? List of color names

        Add a new category