浏览 2498 次
锁定老帖子 主题:从鼠标到手指-传统拖拽在ipad中
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-09-05
最后修改:2011-09-06
以前做过一些UI组件,支持一些拖拖拽拽的。最近搞到个ipad,老的组件到了这些手持设备上自然是拖不走,拽不动了。后来想到一个方法,用touch的事件模拟鼠标的操作,也就是用touch的响应事件触发鼠标事件。话不多说,上代码,请大家拍砖
function isTouchDevice() { return 'ontouchstart' in window; } function fitTouchDevice() { if (!isTouchDevice()) { return; } function simMouseEvt(type, target, pos) { var evt = document.createEvent('MouseEvents'); evt.initMouseEvent(type, true, true, document, 0, pos.screenX, pos.screenY, pos.clientX, pos.clientY, false, false, false, false, 0, target); return target.dispatchEvent(evt); } document.addEventListener("touchstart", function(e) { if (!simMouseEvt("mousedown", e.target, e.changedTouches[0])) { e.preventDefault(); setTimeout(function() { if (!e.target.getAttribute("movement")) { e.target.removeAttribute("movement"); simMouseEvt("click", e.target, e.changedTouches[0]) } }, 100); } }); document.addEventListener("touchmove", function(e) { e.target.setAttribute("movement", "move"); simMouseEvt("mousemove", e.target, e.changedTouches[0]) || e.preventDefault(); }); document.addEventListener("touchend", function(e) { e.target.removeAttribute("movement"); simMouseEvt("mouseup", e.target, e.changedTouches[0]) || e.preventDefault(); }); } 目前只在ipad和android手机上测试过,想法是行得通的。
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |