Office.DragAndDropEventArgs interface
Provides details about the mouse pointer position and the messages or file attachments being dragged and dropped into an add-in's task pane when the Office.EventType.DragAndDropEvent event is raised.
Remarks
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
| drag |
Gets the details about the mouse pointer position within an add-in's task pane and the messages or file attachments being dragged and dropped into the task pane. |
| type | Gets the type of the event. For details, see Office.EventType. |
Property Details
dragAndDropEventData
Gets the details about the mouse pointer position within an add-in's task pane and the messages or file attachments being dragged and dropped into the task pane.
dragAndDropEventData: DragoverEventData | DropEventData;
Property Value
Remarks
type
Gets the type of the event. For details, see Office.EventType.
type: "olkDragAndDropEvent";
Property Value
"olkDragAndDropEvent"