让 jQuery UI draggable 适配移动端
生活随笔
收集整理的這篇文章主要介紹了
让 jQuery UI draggable 适配移动端
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?
背景：
在移動端，本人要實現(xiàn)對某個元素的拖動，想到使用?jQuery UI 的?draggable 功能。但是發(fā)現(xiàn)此插件的拖動只支持PC端，不支持移動端。
?
原因：
原始的?jQuery UI 里，都是mousedown、mousemove、mouseup來描述拖拽和鼠標的點擊事件，而在移動端里，肯定要新添touchstart、touchmove、touchend來描述拖拽和手指的點擊事件
?
實現(xiàn) demo：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"><title>jQuery UI draggable 適配移動端</title> </head> <body> <img id="img" src="http://placehold.it/200x100"><script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script> <script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.js"></script> <script>// jQuery UI draggable 適配移動端var moveFlag = 0; // 是否移動的flag// /iPad|iPhone|Android/.test( navigator.userAgent ) && (function ($) {var proto = $.ui.mouse.prototype, _mouseInit = proto._mouseInit;$.extend(proto, {_mouseInit: function () {this.element.bind("touchstart." + this.widgetName, $.proxy(this, "_touchStart"));_mouseInit.apply(this, arguments);}, _touchStart: function (event) {this.element.bind("touchmove." + this.widgetName, $.proxy(this, "_touchMove")).bind("touchend." + this.widgetName, $.proxy(this, "_touchEnd"));this._modifyEvent(event);$(document).trigger($.Event("mouseup"));//reset mouseHandled flag in ui.mousethis._mouseDown(event);//console.log(this);//return false;//--------------------touchStart do something-------------------- console.log("i touchStart!");}, _touchMove: function (event) {moveFlag = 1;this._modifyEvent(event);this._mouseMove(event);//--------------------touchMove do something-------------------- console.log("i touchMove!");}, _touchEnd: function (event) {// 主動觸發(fā)點擊事件if (moveFlag == 0) {var evt = document.createEvent('Event');evt.initEvent('click', true, true);this.handleElement[0].dispatchEvent(evt);}this.element.unbind("touchmove." + this.widgetName).unbind("touchend." + this.widgetName);this._mouseUp(event);moveFlag = 0;//--------------------touchEnd do something-------------------- console.log("i touchEnd!");}, _modifyEvent: function (event) {event.which = 1;var target = event.originalEvent.targetTouches[0];event.pageX = target.clientX;event.pageY = target.clientY;}});})(jQuery);</script> <script>// my js $("#img").draggable(); </script> </body> </html>?
?
參考資料：
jQuery Ui Draggable在移動端瀏覽器不起作用解決方案
?
轉(zhuǎn)載于:https://www.cnblogs.com/xjnotxj/p/5551548.html
總結(jié)
以上是生活随笔為你收集整理的让 jQuery UI draggable 适配移动端的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第二阶段个人冲刺08
- 下一篇： 通用连接池项目开启