drop-zone

Screen building elements that surround areas where components can be placed. Drop Zones visually indicate to users where they may drag and drop components onto a page.

Base Drop Zone

A Base Drop Zone outlines areas within a page where users may drag and drop a component. These create a template to guide users within a screen building experience.

<div class="slds-drop-zone">
  <div class="demo-only demo-component" style="width:100%;height:10rem">
  </div>

Drag Over Drop Zone

When dragging a component, use the drag over drop zone to indicate to the user where the component will be placed when dropped.

Content

<div class="demo-only" style="padding-top:2rem">
  <div class="slds-drop-zone slds-drop-zone_drag">
    <div class="slds-drop-zone__label">

Insertion Point

An insertion point is used to further communicate to the user the exact slot the component is being placed.

<div class="slds-drop-zone_drag__slot">
</div>

The position of this element should be controlled by your implementation.

  • When there are no components in the drop zone: The insertion point should be placed in the center.

  • When there are components in the drop zone: The insertion point should be placed before or after components, to indicate where a new component will be placed relative to the ones already in the the drop zone.

Drop Zone Container

Use a drop zone container to highlight components within a drop zone. This provides a label for the component, as well as Button Icons to perform actions, such as moving the component and deleting the component from the screen.

<div class="slds-drop-zone">
  <div class="demo-only demo-component" style="width:100%;height:10rem">
  </div>

Example - Cards

<div class="demo-only" style="padding-top:2rem">
  <div class="slds-drop-zone">
    <div class="slds-drop-zone__container" tabindex="-1">

Example - Cards Insertion

Content

<div class="demo-only" style="padding-top:2rem">
  <div class="slds-drop-zone slds-drop-zone_drag">
    <div class="slds-drop-zone__label">