Question

我是html5和Windows应用商店的新用户。我创建了一个项目，我希望我的图像能够拖动。首先是鼠标拖动它工作得很好，但后来我在触摸设备测试它不起作用。这是图像：

这个在非触摸设备上进行测试，它可以工作：

This one is work with mouse cursor

这个在触摸设备上进行测试，但不起作用：

Doesn't Work

这是我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <script src="script.js"></script>
        <title>Drag and Drop</title>
    </head>

<body>

<div id="content">
    <div id="Store" style="border: solid 1px white;"></div>

    <div id="right" style="border: solid 1px white;">
        <img id="img1" src="/image/bugimgS1.png" />
    </div>

</div>
    </body>
</html>

这是我的剧本：

(function () {
    WinJS.UI.Pages.define('DragandDrop.html',
        {
            ready: function ()
            {
                define();
            }
        });
    function get(ID) { return document.getElementById(ID); }
    function create(tag) { return document.createElement(tag); }
    function define()
    {
        var r = get('Store');
        var img1 = get('img1');
        img1.addEventListener('dragstart', _dragStart, false);
        r.addEventListener('dragenter', function (e) { e.preventDefault(); });
        r.addEventListener('dragover', function (e) { e.preventDefault(); });
        r.addEventListener('drop', _dropped, false);


        function _dragStart(e) {
            e.dataTransfer.setData('Text', e.target.id);
        }

        function _dropped(e) {
            e.preventDefault();
            var data = e.dataTransfer.getData('Text');
            r.appendChild(document.getElementById(data));
        }


    }

})();

我真的需要帮助才能使这个程序在触摸和非触摸设备上都能正常工作。在此先感谢。

Answer 1

您需要使用MSGesture对象才能通过触摸事件支持拖放。无论鼠标指针，触摸或数字化手写笔如何，onclick等其他事件都可以无缝地工作。拖动事件目前不会触摸。我在Chrome和IE中测试了这个。

这里有一个很棒的演示：http://ie.microsoft.com/testdrive/Browser/BrowserSurface/

Windows应用商店应用或HTML5拖放支持触控设备吗？

1 个答案: