Skip to content

Order Items

The Order Items component has been updated to include drag & drop functionality.

How to use Order Items

Order Items have simple, fixed use case: They require the user place a set of items in a specific order, such as steps in a process. The items should be short (best when they fit on one line at all resolutions) and can utilize an icon or very small image.

Under Development

Recent changes in the WCAG  and ARIA Authoring Guidelines may invalidate the current implementation as currently drag and drop is not included in the specification. These controls will be updated or potentially removed once the new guidelines have been released.

No Mobile Devices

Presently, the drag & drop based interactions cannot be used on mobile devices. These are platform issues and cannot be resolved at this time. If the project requires mobile devices, do not use this interaction.

Unstyled Example

Order Items Example

Place the Deities below in their order of birth.

  • Izanagi
  • Amaterasu
  • Oshihomimi
  • Ninigi
  • Howori
  • Ugaya
  • Iwarebiko

Example Code

<form class="order-items" id="order-items">
  <div class="inner">
    <h2>Order Items Example</h2>
    <p>Place the Deities below in their order of birth.</p>
    <ul class="items">
      <li id="izanagi" draggable="true" aria-grabbed="false" data-correct="1">Izanagi</li>
      <li id="amaterasu" draggable="true" aria-grabbed="false" data-correct="2">Amaterasu</li>
      <li id="oshihomimi" draggable="true" aria-grabbed="false" data-correct="3">Oshihomimi</li>
      <li id="ninigi" draggable="true" aria-grabbed="false" data-correct="4">Ninigi</li>
      <li id="howori" draggable="true" aria-grabbed="false" data-correct="5">Howori</li>
      <li id="ugaya" draggable="true" aria-grabbed="false" data-correct="6">Ugaya</li>
      <li id="ugaya" draggable="true" aria-grabbed="false" data-correct="7">Iwarebiko</li>
    </ul>
    <div class="form-group">
      <button class="btn btn-submit" type="button">Submit</button>
    </div>
  </div>
  <div class="feedback correct animated fade-left" aria-hidden="true">
    <h3>Correct</h3>
    <div class="feedback-content">
      <p>That's correct. Good job.</p>
    </div>
  </div>
  <div class="feedback incorrect animated fade-right" aria-hidden="true">
    <h3>Incorrect</h3>
    <div class="feedback-content">
      <p>That's not correct:</p>
      <p hidden data-fragment data-scope="izanagi"><strong>Izanagi</strong> is the first one! I can't believe you missed that!?</p>
      <ol>
        <li><i>Izanagi</i> is born of his own accord.</li>
        <li><i>Amaterasu</i> is born from the left eye of <i>Izanagi</i>.</li>
        <li><i>Oshihomimi</i> is born from an ornament of <i>Amaterasu</i>.</li>
        <li><i>Ninigi</i> is a son of <i>Oshihomimi</i> and <i>Akizushi</i>.</li>
        <li><i>Ho<u>w</u>ori</i> is a son of <i>Ninigi</i> and <i>Sakuya</i>.</li>
        <li><i>Ugaya</i> is a son of <i>Ho<u>w</u>ori</i> and <i>Toyotama</i>.</li>
        <li><i>Iwarebiko</i> is a son of <i>Ugaya</i> and <i>Tamayori</i>.</li>
      </ol>
    </div>
    <div class="feedback-footer">
      <button class="btn btn-reset" type="button">Try Again</button>
    </div>
  </div>
</form> 
document.addEventListener('ready', function() { 
  // Initialize Component Instance 
  OrderItems.create('#order-items'); 
  // Handle Complete Event 
  document.getElementById('order-items').addEventListener('complete', function (e) { 
    console.log('I am complete'); 
  }); 
});