javascript - 如何将 javascript 鼠标事件转换为 jquery 移动触摸事件?
问题描述
我是移动网络应用程序的新手。我试图为网页创建一些鼠标可拖动的 div。它们在桌面上运行良好。但是,当我在移动设备上检查它们时,它们都不起作用。我在网上搜索了帮助,但我唯一得到的是我需要使用 jquery mobile 设置触摸事件。一些文章提到了有关使用 touchstart、touchmove 和 touchend 的内容,但没有提供任何示例。
这是我的脚本:
dragElement(document.getElementById("cn"));
dragElement(document.getElementById("ln"));
dragElement(document.getElementById("gn"));
dragElement(document.getElementById("sn"));
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
我试图用相应的触摸事件替换鼠标事件。但它没有用。看来我必须在另一个框架中重写代码。提前致谢。
解决方案
vmousecancel 表示鼠标取消 vmousedown vmousemove vmouseout vmouseover vmouseup
更多示例:https ://api.jquerymobile.com/category/events/
在使用之前,您必须将 jquery.mobile 库放入您的工作区。
推荐阅读
- spring-batch - 在 Spring Batch 的 SkipPolicy 中访问作业文件名参数
- rust - 实现 TryFrom 特征时的类型错误
- image-processing - 定义图像背景的好坏
- c# - 你如何键盘专注于特定项目?
- prolog - 优化 Prolog 规则
- sanity - 在 Sanity Studio 中过滤内容
- c# - 如何在 Xamarin Forms Maps 上添加多个不同的自定义图标?
- javascript - 可点击 div 内的模板文字内的链接不起作用(似乎我无法阻止页面重新加载
- html - 类型“数字”不可分配给类型“字符串”.ts(2322)
- javascript - ajax加载时的jQuery点击事件