使触摸屏移动设备
iPhone至少有某些事件,如ontouchstart,ontouchend等等。这些都是webkit的一部分,但Android的信息比iPhone要少得多。我认为这个问题的答案是,拖放功能需要使用这些事件,而不是通常使用的事件,或者需要同时使用这两种事件。
这篇文章可能会感兴趣 - http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html
有一个jQuery和拖放对手机的支持/触摸屏设备插件:
http://plugins.jquery.com/project/mobiledraganddrop
在移动设备上,你点击选取该项目,然后点击选择放置位置。这解决了拖动操作被设备/浏览器劫持的问题。
旧线,我知道.......
我这里有尊重的解决方案任何输入或其他元素必须对可拖动元素上的“点击”(例如输入)做出反应。该解决方案使得能够使用任何现有的拖放其是基于鼠标按下,鼠标移动库和mouseup任何触摸装置(或cumputer)上的事件。这也是一个跨浏览器的解决方案。
我已经测试了几个设备,它工作快速(结合拖放ThreeDubMedia的特征(见http://threedubmedia.com/code/event/drag))。这是一个jQuery解决方案,因此您只能在jQuery库中使用它。我使用了jQuery 1.5.1,因为有些新功能在IE9和以上(没有使用新版本的jQuery测试)无法正常工作。
在添加任何拖动或下降操作事件你必须调用这个函数首先:
simulateTouchEvents(<object>);
您还可以阻止所有组件/儿童为输入或加快事件处理使用以下语法:
simulateTouchEvents(<object>, true); // ignore events on childs
这是我写的代码。我使用了一些不错的技巧来加速评估事物(参见代码)。
function simulateTouchEvents(oo,bIgnoreChilds)
{
if(!$(oo)[0])
{ return false; }
if(!window.__touchTypes)
{
window.__touchTypes = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
}
$(oo).bind('touchstart touchmove touchend', function(ev)
{
var bSame = (ev.target == this);
if(bIgnoreChilds && !bSame)
{ return; }
var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
e = ev.originalEvent;
if(b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type] )
{ return; } //allow multi-touch gestures to work
var oEv = (!bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false):false;
if(b || window.__touchInputs[ev.target.tagName])
{ return; } //allow default clicks to work (and on inputs)
// https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(newEvent);
e.preventDefault();
ev.stopImmediatePropagation();
ev.stopPropagation();
ev.preventDefault();
});
return true;
};
做些什么: 起初,它转换单点触摸事件转换成鼠标事件。它检查事件是否由必须拖动的元素上/上的元素引起。如果它是input,textarea等input元素,它会跳过翻译,或者如果标准鼠标事件附加到它,它也会跳过翻译。
结果: 可拖动元素上的每个元素仍在工作。
快乐编码,格尔茨, 欧文Haantjes
谢谢Erwin,认真的一款很棒的工具,一开始就尝试,无需调整! 在ELO触摸屏电脑上测试 – 2013-06-28 14:46:30
@Jonathan:很高兴听到这是有用的,谢谢! – Codebeat 2013-06-28 17:38:30
我使用jQuery UI的触摸冲床 - 它的工作原理是黑客鼠标按下,鼠标松开功能以及与touchstart替换它们,touchend等
关于: http://touchpunch.furf.com/
SCRIPT: https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js
CODE:
包括:
<script src="jquery.ui.touch-punch.min.js"></script>
在你的头你的jQuery UI的脚本文件之后。
TouchPunch救了我的屁股。适用于iPad和Nexus 7.谢谢 – 2012-11-05 18:25:06
TouchPunch非常棒,感谢您提醒我这个库。 – nullability 2013-02-22 17:13:14
TouchPunch真的很棒,它节省了我的一天! :) – dinodsaurus 2013-05-16 09:33:47
我用上面的touchpunch答案,它工作得很好。不过,还有一点需要注意。我发现,使用GitHub的链接在网站上(及以上):
SCRIPT:https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js
从网站运行的移动浏览器,但原始的,人类可读的源并工作Android设备不工作。这是截至发布日期,当然可能会得到修复,但同时它可能会为您节省几个调试周期。
此插件(jquery.ui.touch-punch.min.js)支持拖放触摸移动设备。你所要做的只是在jquery和jquery ui之后加载插件。这应该适用于所有移动设备。 – varun 2014-06-26 10:20:52
标记正确的答案。 – RominaV 2016-02-05 17:56:09