3

我是 html5 和 windows 商店应用程序的新手。我创建了一个项目,我希望我的图像能够拖动。首先对于鼠标拖动它工作得很好,但后来我在触摸设备上测试它不工作。这是图像:

这个是在非触摸设备上测试的,它可以工作:

这个是用鼠标光标工作的

这个是在触摸设备上测试的,它不起作用:

不工作

这是我的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));
        }


    }

})();

请我真的需要帮助才能使这个程序在触摸和非触摸设备上都工作。提前致谢。

4

1 回答 1

2

您需要使用MSGesture对象才能支持通过触摸事件进行拖放。onclick无论鼠标指针、触摸或数字化触控笔如何,其他事件都可以无缝工作。拖动事件当前不会通过触摸触发。我已经在 Chrome 和 IE 中对此进行了测试。

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

于 2013-01-09T21:54:16.233 回答