Draggables

Draggables are items that can be moved about the interface. Customers use this pattern to add and reorder elements to fit their needs.

Default

<div class="draggables">
  <a href="#" class="btn--draggable" role="button">Draggable</a>
</div>

Description

The default style for draggable buttons uses the tertiary color.

Disabled

<div class="draggables">
  <a href="#" class="btn--draggable btn--disabled" role="button">Draggable Disabled</a>
</div>

Description

When a draggable item cannot be interacted with we add a btn--disabled class.

Sticky

<div class="draggables draggables--sticky">
  <a href="#" class="btn--draggable" role="button">Screener Question</a>
</div>

Description

Given the nature of the dragging interface some items may go below the view of the window. Apply the draggables--sticky class to ensure that the Draggable element is always in view.

Icons

<div class="draggables">
  <a href="#" class="btn--draggable" role="button">Screener Question
    <tk-icon class="mr-auto ml-2x t-link"
      name="question-mark-circle--filled"
      size="small">
    </tk-icon>
  </a>
</div>
<div class="draggables">
  <a href="#" class="btn--draggable btn--locked" role="button" aria-label="locked feature">
  Screener Question
    <tk-icon name="lock" size="small"></tk-icon>
  </a>
</div>

Description

Draggables may offer complex choices and interactions. Adding icons helps to educate customers on what they can do with draggables and how they can access them. Lock icon denotes access to feature. Read more about lock icons in buttons.

Do

  • Provide enough space to see Draggable and Droppable
  • When clicked, the new element created should receive :focus
  • Ensure action is clear

Don't

  • Include more than two icons in a draggable component
  • Remove the vertical lines from draggable components

Accessibility

  • Receives :focus
  • When clicked, the new element created should receive :focus