JAVASCRIPT drag-and-drop from browser to desktop using TOUCH events?

Question

I'm working on this website, which is supposed to allow the user to drag and drop a div containing an html canvas offscreen. The div is made draggable with jquery's .draggable() function, like this:

div_to_drag.draggable({
    //some .draggable() properties
})

NOTE: jquery .draggable api can be found here: http://api.jqueryui.com/draggable/

When the user begins dragging the div containing the canvas off screen, I convert the canavs to an image, and will save the image to the desktop when the user drops. Instead of using a mouse, the user drags the div offscreen using the touch screen. Touch capabilities are enabled with magictouch.js. Here's the code that handles the when the user begins dragging:

div_to_drag[0].addEventListener('touchstart', function (event) {
    // If 2 fingers are inside the div, user is dragging the div
    if (event.targetTouches.length == 2) {
        //convert canvas inside div to image
        //get datatransfer property of event and attach the image to it
    }
}, false);

NOTE: magictouch.js follows the w3c standards, defined here: https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html#dfn-touchend

Now, the problem is that to drag and drop off screen, it seems that the only way to do that is with the "dataTransfer" property of html5, which is created by the browser during html5 drag events. How do I get the datatransfer property with the touch events of magictouch.js? I've tried programatically creating html5 drag events, but that generates a null datatransfer property, as explained by this older post:

dataTransfer is null when creating drag event programmatically

So, because of security, I can't manually create a datatransfer property during touchstart. But datatransfer is the only way I'll be able to allow a user to drag and drop to desktop. Is there a way I can generate a valid datatransfer property when using touch events? Any help would be much appreciated