Question

我正在使用这个网站，它应该允许用户在屏幕外拖放包含html画布的div。 div可以使用jquery的.draggable（）函数进行拖动，如下所示：

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

注意：可以在这里找到jquery .draggable api： http://api.jqueryui.com/draggable/

当用户开始将包含画布的div拖离屏幕时，我将canavs转换为图像，并在用户放下时将图像保存到桌面。用户不使用鼠标，而是使用触摸屏将div拖出屏幕。使用magictouch.js启用触摸功能。这是处理用户开始拖动的代码：

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);

注意：magictouch.js遵循此处定义的w3c标准： https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html#dfn-touchend

现在，问题是要拖放屏幕，似乎唯一的方法是使用html5的“dataTransfer”属性，这是由浏览器在html5拖动事件期间创建的。如何使用magictouch.js的触摸事件获取datatransfer属性？我已经尝试以编程方式创建html5拖动事件，但这会生成一个null datatransfer属性，正如这篇较老的帖子所解释的那样：

dataTransfer is null when creating drag event programmatically

因此，由于安全性，我无法在touchstart期间手动创建datatransfer属性。但是datatransfer是我能够允许用户拖放到桌面的唯一方法。有没有办法在使用触摸事件时生成有效的datatransfer属性？任何帮助将不胜感激

JAVASCRIPT使用TOUCH事件从浏览器拖放到桌面？

0 个答案: