JavaScript的拖放触摸设备

我正在寻找一个在触摸设备上工作的拖放插件。

我想要类似于jQuery UI插件的function,它允许“droppable”元素。

jqtouch插件支持拖动,但没有丢弃。

这是只支持iPhone / iPad的拖放。

任何人都可以指向一个在android / ios上工作的拖放插件的方向吗?

…或者可能更新jqtouch插件的droppability,它已经在Andriod和IOS上运行。

谢谢!

您可以使用Jquery用户界面拖放一个额外的库,将鼠标事件转换为触摸,这是你需要的,我build议的库是https://github.com/furf/jquery-ui-touch-punch ,与这从Jquery UI的拖放应该在触摸devise上工作

或者你可以使用我使用的这个代码,它也将鼠标事件转换为触摸,它的作用就像魔术一样。

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()函数即可

代码从这里find

对于任何想要使用它并保持“点击”function的人(正如John Landheer在他的评论中提到的那样),你可以只做几个修改:

添加几个全局variables:

 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; } 

您可能需要根据自己的口味调整“点击量”。 基本上它只是看着一个'触摸',然后快速地通过'touchend'模拟点击。

感谢上面的代码! – 我尝试了几个选项,这是票。 我有问题,preventDefault阻止在iPad上滚动 – 我现在正在testing可拖动的项目,它迄今为止效果很好。

 if (event.target.id == 'draggable_item' ) { event.preventDefault(); } 

我有与gregpress答案相同的解决scheme,但我的可拖动项目使用类而不是一个id。 这似乎工作。

 var $target = $(event.target); if( $target.hasClass('draggable') ) { event.preventDefault(); } 

我知道老线程…….

问题与@ryuutatsuo的答案是,它也阻止任何input或其他元素,必须对“点击”(例如input)作出反应,所以我写了这个解决scheme。 这个解决scheme使得可以使用任何现有的基于鼠标,鼠标移动和鼠标事件的拖放库在任何触摸设备(或计算机)上。 这也是一个跨浏览器的解决scheme。

我已经在几个设备上进行了testing,它的工作速度很快(结合ThreeDubMedia的拖放function(另请参阅http://threedubmedia.com/code/event/drag ))。 这是一个jQuery解决scheme,所以你只能用jQuery库。 我已经使用jQuery 1.5.1 ,因为一些新的function不能正常使用IE9及以上版本(未使用新版本的jQuery进行testing)。

将任何拖放操作添加到事件之前,必须先调用此函数

 simulateTouchEvents(<object>); 

您还可以使用以下语法阻止所有组件/子项的input或加速事件处理:

 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; }; 

function:首先,它将单点触摸事件转换为鼠标事件。 它检查一个事件是否是由必须被拖动的元素上的一个元素引起的。 如果是input,textarea等input元素,则跳过翻译,或者如果标准的鼠标事件连接到它,它也会跳过翻译。

结果:可拖动元素上的每个元素仍然在工作。

快乐的编码,问候,Erwin Haantjes