gpt4 book ai didi

javascript - Windows 应用商店应用程序或 HTML5 拖放是否支持触摸设备?

转载 作者:可可西里 更新时间:2023-11-01 13:36:57 24 4
gpt4 key购买 nike

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


}

})();

拜托,我真的需要帮助才能使这个程序在触摸和非触摸设备上都能运行。提前致谢。

最佳答案

您需要使用 MSGesture对象能够通过触摸事件支持拖放。 onclick 等其他事件可以无缝运行,而不管鼠标指针、触摸或数字化手写笔如何。拖动事件目前不会通过触摸触发。我已经在 Chrome 和 IE 中对此进行了测试。

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

关于javascript - Windows 应用商店应用程序或 HTML5 拖放是否支持触摸设备?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14208834/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com