我们有一个卡片游戏网站，广泛使用jQuery Draggable& Droppable，而且几乎完美地工作(当使用鼠标)近一年。
我们真的希望有网站工作在触摸屏设备，但我们似乎不能得到jQuery的拖动，特别是drop功能可靠地工作。
拖动工作“确定”，除非被拖动的div在具有任何偏移，边距，填充等的另一个dom元素内。如果是，拖动的元素也从用户的手指偏移相似的量。可能听起来不是很大，但它使接口不可用。
滴滴似乎不工作。
我们研究了这里提出的各种选项(如果可以的话，将尝试更新这个帖子与其中一些的链接)，但没有为我们工作。
我们也研究了jQuery Mobile，但是这仍然是alpha，甚至这似乎更多的一个框架，使网站模拟手机的UI vs我们正在寻找。
大多数关于这个话题的SO和谷歌帖子似乎在2010年末落后，这让我认为有一个明显的答案，也许我们只是失踪。
BTW，我们正在寻找的功能显然在技术上是可能的，因为YUI库拖放工作按预期。不幸的是，我们不能证明重构站点从jQuery切换到YUI。
任何人有什么想法？我们会解决一个只支持iPad的答案，但它真的需要不要求我们重构现有的网站。
谢谢！
解决方法
将其粘贴到.js文件的开头：
(function ($) {
// Detect touch support
$.support.touch = 'ontouchend' in document;
// Ignore browsers without touch support
if (!$.support.touch) {
return;
}
var mouseProto = $.ui.mouse.prototype,_mouseInit = mouseProto._mouseInit,touchHandled;
function simulateMouseEvent (event,simulatedType) { //use this function to simulate mouse event
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault(); //use this to prevent scrolling during ui use
var touch = event.originalEvent.changedTouches[0],simulatedEvent = document.createEvent('MouseEvents');
// Initialize the simulated mouse event using the touch event's coordinates
simulatedEvent.initMouseEvent(
simulatedType,// type
true,// bubbles
true,// cancelable
window,// view
1,// detail
touch.screenX,// screenX
touch.screenY,// screenY
touch.clientX,// clientX
touch.clientY,// clientY
false,// ctrlKey
false,// altKey
false,// shiftKey
false,// MetaKey
0,// button
null // relatedTarget
);
// Dispatch the simulated event to the target element
event.target.dispatchEvent(simulatedEvent);
}
mouseProto._touchStart = function (event) {
var self = this;
// Ignore the event if another widget is already being handled
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
return;
}
// Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;
// Track movement to determine if interaction was a click
self._touchMoved = false;
// Simulate the mouSEOver event
simulateMouseEvent(event,'mouSEOver');
// Simulate the mousemove event
simulateMouseEvent(event,'mousemove');
// Simulate the mousedown event
simulateMouseEvent(event,'mousedown');
};
mouseProto._touchMove = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Interaction was not a click
this._touchMoved = true;
// Simulate the mousemove event
simulateMouseEvent(event,'mousemove');
};
mouseProto._touchEnd = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Simulate the mouseup event
simulateMouseEvent(event,'mouseup');
// Simulate the mouSEOut event
simulateMouseEvent(event,'mouSEOut');
// If the touch interaction did not move,it should trigger a click
if (!this._touchMoved) {
// Simulate the click event
simulateMouseEvent(event,'click');
}
// Unset the flag to allow other widgets to inherit the touch event
touchHandled = false;
};
mouseProto._mouseInit = function () {
var self = this;
// Delegate the touch handlers to the widget's element
self.element
.on('touchstart',$.proxy(self,'_touchStart'))
.on('touchmove','_touchMove'))
.on('touchend','_touchEnd'));
// Call the original $.ui.mouse init method
_mouseInit.call(self);
};
})(jQuery);
在早上打电话给我;)(这真的傲慢，我没有写这个解决方案，虽然我希望我有，如果我记得我在哪里找到它，我会引用，如果有人知道这个代码来自哪里，请评论和信用该人)
