Mail App for Outlook and Html5: drag and drop RRS feed

  • Question

  • Hello

    I have created a mail app, which has a html div tag with dropzone and events dragenter, dragover and drop specified. I can drag and drop content from within the app iframe to the div with no problem.

    However i can not drag mail items (from e-mail list) from OWA to it, nor can i drag anything out of my mail app to OWA.

    But in Outlook 2013 (in same app) i can drag e-mails and other stuff to the div in the app, but same cannot drag anythig out.

    There are few things i would like to ask about drag and drop:

    • is there anything special a dropzone in an mail app object needs to have, so e-mails can be droped on it in OWA?
    • is there anything special a dragged item needs to have, so it can be dragged out of the app to editable text (example appointment editing - if i double click an appointment i can edit appointment body and i can drag any text in body into the app, but i cant drag anything from app to appointment body)?

    If i maybe explain it in what i am trying to achive:

    1. In OWA i would like to drag and drop emails to a specific div in the mail app (this is possible if app is running in Outlook 2013 client).
    2. I would like to drag an item (marked with draggable and has event for dragstar where i set dataTransfer with setData("Text" , "...") and "all" for effectAllowed) from a mail app (with appointment activation in Outlook 2013) to the appointment body.

    Is 1. even possible or is this browser dependant? Is 2. even possible?

    Thank you

    Anze Javornik

    Thursday, January 10, 2013 2:40 AM

All replies

  • Hi Anze,

    Thanks for posting in the MSDN Forum.

    I will involve some experts into your thread to see whether they can help you. There might be some time delay, appreciate for your patience.

    Have a good day,


    Tom Xu [MSFT]
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, January 11, 2013 4:13 AM
  • Anze,

    I'm looking at this one now. Have you made any progress in figuring this out? If not, to get me up to speed faster, could you share your code so far?


    Tuesday, February 26, 2013 10:18 PM
  • Hi

    At this moment i have some deadlines, which made me put this on a hold. As much as i could figure out, is that OWA and Outlook behave differently. In OWA i can only drag and drop from inside the app itself. If for example i mark text inside the "search mailbox" texbox i can not drag and drop it to a textbox that is inside my app.

    I have also tried to make a html5 drop field to accept everything and still it would not allow drop from OWA. I have tried to drag drop to but from OWA i had no success.

    However in Outlook this can be done: i can drag and drop emails to textbox and other text, but nothing from app to the content (if you open an appointment form in Outlook you can edit the content with app showing -> which is again different behaviour then OWA)

    Due to such a big difference of behaviour in OWA and Outlook my goal was just to try and recive drops into the app, where dropped items would be emails. Once app would be available for composed items it would be great if drop would be accepted by content aswell.

    I will return to this probably this week and will provide more information.

    This is the code i had tested on in the app:

    function handleDrop(e) {
        // this / is current target element.
        if (e.stopPropagation) {
            e.stopPropagation(); // stops the browser from redirecting.
        $.showToast("toast", e.dataTransfer.getData("Text"));
        // See the section on the DataTransfer object.
        return false;
    function handleDragEnter(e) {
        return true;
    function handleDragOver(e) {
        return false;

    No breakpoints on dargEnter or dragOver were hit if dragging from "outside app context" in OWA to app.

    Anze Javornik

    Wednesday, February 27, 2013 12:46 AM
  • Anze,

    Your code appears to work for me in IE9, but not in IE10. This makes me suspect the sandbox attribute on the iframe hosting the app is the culprit, as this attribute (new to HTML5) is supported by IE 10 but not IE 9.


    Wednesday, March 6, 2013 11:02 PM
  • Sorry for late reply...did not recive any notification that a reply was made.

    So what is the end drag and drop from OWA / Outlook to App and vv something that is planned to be supported, or something that is planned to not be supported?

    Sandox on iframe contains allow-same-origin, which should treat the iframe content as beeing from the same origin as document. So in IE10 (where this attribute is supported) this should allow drag and drop? Or do i understand this wrong?

    IE9, which ignores this attribute, has no corss origin problems (is like supporting sandbox="allow-same-origin" couses drag and drop to fail? this correct functionality?)

    If i think that this will in "near" future be supported in OWA and Outlook, i wont be wrong?

    Anze Javornik

    Friday, April 26, 2013 4:48 PM