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
