地域性旅游网站建设系统结构,网站开发用的框架前端,网站建设公司的出路,工业设计师背景#xff1a; 在移动端#xff0c;本人要实现对某个元素的拖动#xff0c;想到使用 jQuery UI 的 draggable 功能。但是发现此插件的拖动只支持PC端#xff0c;不支持移动端。 原因#xff1a; 原始的 jQuery UI 里#xff0c;都是mousedown、mousemove、mouseup来描述… 背景 在移动端本人要实现对某个元素的拖动想到使用 jQuery UI 的 draggable 功能。但是发现此插件的拖动只支持PC端不支持移动端。 原因 原始的 jQuery UI 里都是mousedown、mousemove、mouseup来描述拖拽和鼠标的点击事件而在移动端里肯定要新添touchstart、touchmove、touchend来描述拖拽和手指的点击事件 实现 demo !DOCTYPE html
html langen
headmeta charsetUTF-8meta contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0; nameviewporttitlejQuery UI draggable 适配移动端/title
/head
body
img idimg srchttp://placehold.it/200x100script 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) {// 主动触发点击事件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在移动端浏览器不起作用解决方案 转载于:https://www.cnblogs.com/xjnotxj/p/5551548.html
