Edit

Share via


Office.DragoverEventData interface

Represents the DragAndDropEventArgs.dragAndDropEventData object when messages or file attachments are dragged over an add-in's task pane.

Remarks

[ API set: Mailbox 1.5 ]

To learn more about the drag-and-drop feature and how to implement it across various Outlook clients, see Drag and drop messages and attachments into the task pane of an Outlook add-in.

Examples

// Link to full sample: https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/outlook/80-events/drag-drop-item.yaml

function dragAndDropEventHandler(event) {
    Office.context.mailbox.addHandlerAsync(Office.EventType.DragAndDropEvent, (event) => {
    console.log(`Event type: ${event.type}`);

    const eventData = event.dragAndDropEventData;
    console.log(`x-coordinate: ${eventData.pageX}, y-coordinate: ${eventData.pageY}`);

    if (eventData.type == "drop") {
      console.log("Items dropped into task pane.");
      const files = eventData.dataTransfer.files;
      files.forEach((file) => {
        const content = file.fileContent;
        const name = file.name;
        const fileType = file.type;
        console.log(`File name: ${name}`);
        console.log(`File type: ${fileType}`);
        console.log(`Contents: ${content.text().then((text) => { console.log(text); })}`);
      });
    }
  });
}

Properties

pageX

Gets the x-coordinate of the mouse pointer that represents the horizontal position in pixels. The position is relative to the left edge of the Outlook on the web or the new Outlook on Windows client window.

pageY

Gets the y-coordinate of the mouse pointer that represents the vertical position in pixels. The position is relative to the top edge of the Outlook on the web or the new Outlook on Windows client window.

type

Gets the type of drag-and-drop event. The dragover event occurs when messages or file attachments are dragged over an add-in's task pane.

Property Details

pageX

Gets the x-coordinate of the mouse pointer that represents the horizontal position in pixels. The position is relative to the left edge of the Outlook on the web or the new Outlook on Windows client window.

pageX: number;

Property Value

number

Remarks

[ API set: Mailbox 1.5 ]

pageY

Gets the y-coordinate of the mouse pointer that represents the vertical position in pixels. The position is relative to the top edge of the Outlook on the web or the new Outlook on Windows client window.

pageY: number;

Property Value

number

Remarks

[ API set: Mailbox 1.5 ]

type

Gets the type of drag-and-drop event. The dragover event occurs when messages or file attachments are dragged over an add-in's task pane.

type: "dragover";

Property Value

"dragover"

Remarks

[ API set: Mailbox 1.5 ]