Skip to content

Drag & Drop (Simple)

Provide the user with an item and ask that they drag it to the correct container.

How to use Simple Drag & Drop

Simple Drag & Drop interactions are a substitute for the original intent of the Answer Set — That is, a matching interaction.

The interaction works best when dragging an icon or very short phrase. The draggable area must be larger than the largest human thumb that could be used to grab the element — 100px square is smallest usable size, but larger, so that the term or icon is identifiable with the same thumb over the icon is better.

Another limitation is that the draggable element and all drop targets must be on-screen at the same time. This is because the browser may not scroll when dragging, making it impossible to complete the question.

 

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

Drag & Drop Example

What Kami does Amaterasu belong to? Drag her icon to the correct Kami below.

Amaterasu

Major Kami
Minor Kami
Buddhist

Example Code

<form id="drag-drop" class="drag-drop">
  <h2>Drag &amp; Drop Example</h2>
  <div class="draggables">
    <div class="draggable">
      <div id="d1-desc" class="draggable-desc">
        <p>What Kami does Amaterasu belong to? Drag her icon to the correct Kami below.</p>
      </div>
      <a href="#" id="amaterasu" aria-describedby="d1-desc" 
         class="drag-item" role="button" 
         draggable="true" aria-grabbed="false" 
         data-correct="major">Amaterasu</a>
    </div>
    <div class="draggable" aria-hidden="true">
      <div id="d2-desc" class="draggable-desc">
        <p>What Kami does Sarutahiko Ōkami belong to? Drag her icon to the correct Kami below.</p>
      </div>
      <a href="#" id="sarutahiko" aria-describedby="d2-desc" 
         class="drag-item" role="button" 
         draggable="true" aria-grabbed="false" 
         data-correct="minor">Sarutahiko Ōkami</a>
    </div>
  </div>
  <div class="drag-targets">
    <div id="major" class="drag-target">
      <div class="inner">Major Kami</div>
    </div>
    <div id="minor" class="drag-target">
      <div class="inner">Minor Kami</div>
    </div>
    <div id="buddhist" class="drag-target">
      <div class="inner">Buddhist</div>
    </div>
  </div>
  <div aria-hidden="true" class="feedback correct animated fade-left">
    <h3>Correct</h3>
    <div class="feedback-content">
      <p>That's correct. Good job.</p>
    </div>
  </div>
  <div aria-hidden="true" class="feedback incorrect animated fade-right">
    <h3>Incorrect</h3>
    <div class="feedback-content">
      <p>That's not correct:</p>
      <p hidden data-fragment data-scope="amaterasu">...</p>
    </div>
    <div class="feedback-footer">
      <button type="button" class="btn btn-reset">Try Again</button>
    </div>
  </div>
</form>
function replace(){ //replace this; }