Draggable, Resizable, and Sortable Content

Canvas can add interactive behaviour to certain elements using its legacy enhanceable content system. When the page loads, Canvas runs its built-in JavaScript and looks for elements marked with classes such as enhanceable_content draggable,resizable, or sortable, and applies the corresponding interactions.

These behaviours are handled by Canvas' own JavaScript and CSS. They cannot be recreated with inline styles alone, and you cannot add your own <script> to Rich Content Editor pages. The examples on this page work because Canvas enhances the markup automatically.

Useful references

For broader background on web drag-and-drop (outside Canvas), see:

• MDN — HTML Drag and Drop API
• Dragging Movements (Level AA)

Draggable content

A draggable element is created by applying class="enhanceable_content draggable"to a container. When Canvas processes the page, it enables drag-and-move behaviour within the element's parent area.

<div style="width: 100%; height: 200px;">
  <div class="enhanceable_content draggable">
    <div style="
      text-align: center;
      background-color: #0000cd;
      color: #ffffff;
      width: 300px;
      height: 60px;
    ">
      <p style="padding: 15px; margin: 0;">
        Drag this box around inside the area
      </p>
    </div>
  </div>
</div>

Resizable content

Applying class="enhanceable_content resizable" to a container allows Canvas to add a resize handle. Learners can resize the element directly in the page, typically by dragging a corner.

<div style="width: 100%; height: 200px;">
  <div class="enhanceable_content resizable" style="
    text-align: center;
    background-color: #232333;
    color: #ffffff;
    width: 400px;
    height: 80px;
  ">
    <p style="padding: 15px; margin: 0;">
      Resize this box using the handle in the corner
    </p>
  </div>
</div>

Sortable lists

You can create a sortable list by adding class="enhanceable_content sortable" to a list container. Canvas enhances the list so that items can be rearranged by dragging them into a new order.

<ul class="enhanceable_content sortable">
  <li style="
    text-align: center;
    background-color: #000080;
    color: #ffffff;
    width: 300px;
    height: 60px;
    margin-bottom: 0.5rem;
  ">
    <p style="padding: 15px; margin: 0;">Box 1 — drag to re-order</p>
  </li>
  <li style="
    text-align: center;
    background-color: #0000cd;
    color: #ffffff;
    width: 300px;
    height: 60px;
    margin-bottom: 0.5rem;
  ">
    <p style="padding: 15px; margin: 0;">Box 2 — drag to re-order</p>
  </li>
  <li style="
    text-align: center;
    background-color: #232333;
    color: #ffffff;
    width: 300px;
    height: 60px;
  ">
    <p style="padding: 15px; margin: 0;">Box 3 — drag to re-order</p>
  </li>
</ul>

Accessibility notes

These interactions are provided by Canvas' legacy JavaScript and do not use modern, semantic drag-and-drop patterns. In particular:

• Keyboard interaction and screen reader support are limited compared to fully accessible drag-and-drop implementations.
• Movement of elements may not be announced clearly by assistive technologies.
• Behaviour on touch devices can vary between browsers.

For important learning activities, ensure that the same information and tasks are available in a non-interactive format (for example, as an ordered list or a series of clearly labelled steps) so that all learners can participate.