用于触摸设备的Javascript拖放
我正在寻找一个拖放插件，在触摸设备上工作。
我想要类似的功能到jQuery UI plugin，允许“可丢弃”的元素。
jqtouch plugin支持拖放，但不支持拖放。
Here是只支持iPhone/iPad的拖放工具。
谁能告诉我在android/ios上工作的拖放插件的方向？
...Or有可能更新jqtouch插件的可丢失性，它已经在Andriod和IOS上运行了。
谢谢!
回答 4
Stack Overflow用户
发布于 2011-06-16 02:30:09
您可以使用Jquery UI进行拖放，还可以使用一个额外的库将鼠标事件转换为您需要的触摸，我推荐的库是https://github.com/furf/jquery-ui-touch-punch，通过这个库，您可以在触摸设备上使用Jquery UI的拖放操作
或者你可以使用我正在使用的代码，它还可以将鼠标事件转换为触摸，它就像魔术一样工作。
function touchHandler(event) {
var touch = event.changedTouches[0];
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init() {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}在你的document.ready中只需调用init()函数
从Here找到的代码
Stack Overflow用户
发布于 2012-04-01 07:54:52
对于任何想要使用这个功能并保留'click‘功能的人(正如John Landheer在他的评论中提到的那样)，你只需要做几个修改就可以了：
添加几个全局变量：
var clickms = 100;
var lastTouchDown = -1;然后将switch语句从原来的修改为：
var d = new Date();
switch(event.type)
{
case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
case "touchmove": type="mousemove"; lastTouchDown = -1; break;
case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
default: return;
}你可能想要根据你的喜好来调整“点击”。基本上，它只是等待一个“touchstart”，然后是一个“touchend”来模拟点击。
Stack Overflow用户
发布于 2011-11-06 22:57:39
感谢上面的代码！-我尝试了几个选项，这就是门票。我遇到了preventDefault阻止在ipad上滚动的问题-我现在正在测试可拖动的项目，到目前为止它工作得很好。
if (event.target.id == 'draggable_item' ) {
event.preventDefault();
}https://stackoverflow.com/questions/5186441
复制相似问题
腾讯云开发者
