背景:

在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能。但是发现此插件的拖动只支持PC端,不支持移动端

原因:

原始的 jQuery UI 里,都是mousedown、mousemove、mouseup来描述拖拽和鼠标的点击事件,而在移动端里,肯定要新添touchstarttouchmovetouchend来描述拖拽和手指的点击事件

实现 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.mouse
this._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在移动端浏览器不起作用解决方案

让 jQuery UI draggable 适配移动端的更多相关文章

  1. JQuery UI Draggable插件使用说明文档

    JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...

  2. jquery ui draggable,droppable 学习总结

    刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...

  3. jQuery UI - draggable 中文API

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

  4. JQuery UI - draggable(转)

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

  5. JQuery UI - draggable参数中文详细说明

    概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个参 ...

  6. jquery UI Draggable和Droppable 案例

    <html> <head><title>draggable</title> <script type="text/javascript& ...

  7. Jquery ui draggable在chrome和ie7下的bug

    当页面足够长,向下滚动一些之后, 在拖动时,被拖动的div会向下产生滚动距离那么高(scrolltop)的差距 鼠标位置距div顶部差距了正好页面scroll的距离,页面scoll越多差的越多. 解决 ...

  8. jQuery UI Draggable + Sortable 结合使用

    工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了, Demo截图:从左边控件拖到右边区域 代码段: <scrip ...

  9. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件

    习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...

随机推荐

  1. php中的mysql 和 mysqli 区别

    mysql是非持续连接函数,每次链接都会打开一个连接进程 mysqli是持续连接函数,多次运行将使用同一连接进程,从而降低服务器开销.

  2. Java Spring AOP用法

    Java Spring AOP用法 Spring AOP Java web 环境搭建 Java web 项目搭建 Java Spring IOC用法 spring提供了两个核心功能,一个是IoC(控制 ...

  3. 【转】一个lucene的官网例子

    创建索引: import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import jav ...

  4. Linux3:more、which、find、chmod、tar、diff、grep、ps、netstat、uname

    more 类似cat,不过more不是将整个文件内容从上到下显示在屏幕上的,而是以一页一页的显示方便使用者逐页阅读.more最基本的指令就是space即往下翻一页,b即往回翻一页显示,而且还有搜索字符 ...

  5. .net开发笔记(十二) 设计时与运行时的区别(续)

    上一篇博客详细讲到了设计时(DesignTime)和运行时(RunTime)的概念与区别,不过没有给出实际的Demo,今天整理了一下,做了一个例子,贴出来分享一下,巩固前一篇博客讲到的内容. 简单回顾 ...

  6. ACEXML解析XML文件——我是如何学习并在短时间内掌握一个库的使用方法的

    最近做的C++项目中需要使用xml文件保存一些信息,程序启动时会读取这些信息.最终经过主程的评测,决定使用ACEXML库来读取解析XML文件. 好吧,至于为什么选择ACEXML库,我就不说了.既然选择 ...

  7. 细说.NET中的多线程 (四 使用锁进行同步)

    通过锁来实现同步 排它锁主要用来保证,在一段时间内,只有一个线程可以访问某一段代码.两种主要类型的排它锁是lock和Mutex.Lock和Mutex相比构造起来更方便,运行的也更快.但是Mutex可以 ...

  8. php json与xml序列化/反序列化

    在web开发中对象的序列化与反序列化经常使用,比较主流的有json格式与xml格式的序列化与反序列化,今天想写个jsop的小demo,结果发现不会使用php序列化,查了一下资料,做个笔记 简单数组js ...

  9. XMPie Tracking 操作

    XMPie Tracking 操作 1.1    打开页面 我们随便打开一个页面,这里打开landing.aspx 我们想要跟踪页面,选中DW上面的TrackingàTracking Page Vis ...

  10. iOS 获取键盘相关信息

    一,在需要的地方添加监听 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(onKeyboardWil ...