Drop Handler

<mo-drop-handler> | MODropHandler

Since 1.2

stable

A Drop Handler is an area into which items can be dragged and dropped to accomplish a task by using the HTML Drag and Drop API. The component itself provides no visual indication, but any content placed within will be interactive.

Place your content here

<mo-drop-handler>
  <div class="drop-handler">Place your content here</div>
</mo-drop-handler>
<style>
  .drop-handler {
    padding: 1rem 1.5rem;
    border: 1px dashed var(--mo-color-secondary-70);
    transition: all var(--mo-transition-medium) ease-in-out;
  }
  mo-drop-handler[dragged] .drop-handler {
    border-color: var(--mo-color-secondary-30);
    background-color: var(--mo-color-secondary-90);
  }
</style>

const css = `
  .drop-handler {
    padding: 1rem 1.5rem;
    border: 1px dashed var(--mo-color-secondary-70);
    transition: all var(--mo-transition-medium) ease-in-out;
  }
  mo-drop-handler[dragged] .drop-handler {
    border-color: var(--mo-color-secondary-30);
    background-color: var(--mo-color-secondary-90);
  }
`;
const App = () => {
  return (
    <>
      <MODropHandler>
        <div>Place your content here</div>
      </MODropHandler>

      <style>{css}</style>
    </>
  );
};

Examples

Dragged

Use the dragged attribute to change the appearance of the content placed within the drop-handler when items are dragged over the interactive area.

Place your content here

<mo-drop-handler dragged>
  <div class="drop-handler">Place your content here</div>
</mo-drop-handler>
<style>
  .drop-handler {
    padding: 1rem 1.5rem;
    border: 1px dashed var(--mo-color-secondary-70);
    transition: all var(--mo-transition-medium) ease-in-out;
  }
  mo-drop-handler[dragged] .drop-handler {
    border-color: var(--mo-color-secondary-30);
    background-color: var(--mo-color-secondary-90);
  }
</style>

const css = `
  .drop-handler {
    padding: 1rem 1.5rem;
    border: 1px dashed var(--mo-color-secondary-70);
    transition: all var(--mo-transition-medium) ease-in-out;
  }
  mo-drop-handler[dragged] .drop-handler {
    border-color: var(--mo-color-secondary-30);
    background-color: var(--mo-color-secondary-90);
  }
`;
const App = () => {
  return (
    <>
      <MODropHandler dragged>
        <div>Place your content here</div>
      </MODropHandler>

      <style>{css}</style>
    </>
  );
};

Event handling

The drop-handler provides a set of events that the consuming component can respond to in order to upload files, provide visual feedback and validate the elements dragged and dropped over the interactive area.

No event dispatched

<mo-drop-handler class="drop-handler-events">
  <div class="drop-handler drop-handler-message">No event dispatched</div>
</mo-drop-handler>
<style>
  .drop-handler {
    padding: 1rem 1.5rem;
    border: 1px dashed var(--mo-color-secondary-70);
    transition: all var(--mo-transition-medium) ease-in-out;
  }
  mo-drop-handler[dragged] .drop-handler {
    border-color: var(--mo-color-secondary-30);
    background-color: var(--mo-color-secondary-90);
  }
</style>
<script>
  const dropHandler = document.querySelector('.drop-handler-events');
  const message = document.querySelector('.drop-handler-message');
  let currentEvent = null;

  function escapeHtml(html) {
    const div = document.createElement('span');
    div.textContent = html;
    return div.innerHTML;
  }

  function notify(event) {
    if (currentEvent !== event) {
      message.innerHTML = escapeHtml(`Dispatched event of type: ${event}`);
      currentEvent = event;
    }
  }

  dropHandler.addEventListener('mo-drag', () => notify('mo-drag'));
  dropHandler.addEventListener('mo-drag-leave', () => notify('mo-drag-leave'));
  dropHandler.addEventListener('mo-drag-over', () => notify('mo-drag-over'));
  dropHandler.addEventListener('mo-drop', () => notify('mo-drop'));
  dropHandler.addEventListener('mo-drop-end', () => notify('mo-drop-end'));
  dropHandler.addEventListener('mo-drop-enter', () => notify('mo-drop-enter'));
  dropHandler.addEventListener('mo-drop-start', () => notify('mo-drop-start'));
</script>

import { MODropHandler } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .drop-handler {
    padding: 1rem 1.5rem;
    border: 1px dashed var(--mo-color-secondary-70);
    transition: all var(--mo-transition-medium) ease-in-out;
  }
  mo-drop-handler[dragged] .drop-handler {
    border-color: var(--mo-color-secondary-30);
    background-color: var(--mo-color-secondary-90);
  }
`;
const App = () => {
  const [currentEvent, setCurrentEvent] = useState('No event dispatched');

  function notify(event) {
    setTimeout(() => setCurrentEvent(event), 200);
  }

  return (
    <>
      <MODropHandler
        onMoDrag={notify}
        onMoDragLeave={notify}
        onMoDragOver={notify}
        onMoDrop={notify}
        onMoDropEnd={notify}
        onMoDropEnter={notify}
        onMoDropStart={notify}
      >
        <div class="drop-handler drop-handler-message">Dispatched event of type: {currentEvent}</div>
      </MODropHandler>

      <style>{css}</style>
    </>
  );
};

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler

React

Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/drop-handler/drop-handler.js';

To import this component as a React component:

import MODropHandler from '@metsooutotec/modes-web-components/dist/react/drop-handler/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/drop-handler/drop-handler.js"></script>

Slots

Name	Description
(default)	the default slot is a container which allows the user to interact with the HTML Drag and Drop API.

Learn more about using slots.

Properties

Name	Description	Type	Default
`dropEffect`	Controls the feedback (typically visual) the user is given during a drag and drop operation	`DropEffect`	-
`isDragged` `dragged`	Indicates if an item is currently dragged over the slotted area	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`mo-drag-leave`	`onMoDragLeave`	Emitted when dragged files have been moved out of the drop-handler area without having been dropped.	-
`mo-drag-over`	`onMoDragOver`	Emitted when files have been dragged over the drop-handler area, but not yet dropped.	-
`mo-drop`	`onMoDrop`	Emitted when dragged files have been dropped on the drop-handler area.	-

Learn more about events.