DropMask

DropMask creates an area inside a Drop or DropList that does not accept a drop. Moving over the mask clears the active target and prevents the masked element's enclosing target from receiving that movement.

Props

Prop	Type / Default	Description
tag	String or component ('div')	Root element or Vue component. A component must render one HTML root element; its props, attributes, listeners, and slots are forwarded.

Slots

default and other named slots are forwarded to the root component. For a native tag, use the default slot for masked content.

Demo

Mask part of a drop target

Releasing over the pink mask does nothing; the surrounding target still accepts drops.

Drag me

Drop target

DropMask

Nothing dropped yetView DropMask component docs →

View example code

Template

<Drag
  class="dnd-demo__item"
  data="Masked example"
  go-back
>
  Drag me
</Drag>
<Drop class="dnd-demo__zone demo-mask-target" @drop="onDrop">
  <span class="dnd-demo__label">Drop target</span>
  <DropMask class="demo-mask">
    DropMask
  </DropMask>
</Drop>

TypeScript

import { ref } from 'vue';
import { Drag, Drop, DropMask } from 'vue-easy-dnd';

const status = ref('Nothing dropped yet');
const onDrop = () => {
  status.value = 'Dropped on the unmasked target';
};