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 に答える