背景：

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

原因：

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

实现 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. "微空间"免费空间很棒哦，很适合中小网站站长

    “微空间”(www.idcbt.com)是最长久的免费云主机 现在在站长圈子里面非常火爆的“微空间”免费空间网(www.idcbt.com)犹如火山爆发一样,瞬间成为了广大站长津津乐道的免费主机空间. ...

  2. oracle常用语句总结

    一.用户管理类 1.创建用户: Create user username Identified by password Default tablespace tablespacename Tempor ...

  3. C# 通过服务启动窗体（把窗体添加到服务里）实现用户交互的windows服务[转发]

    由于个人需要,想找一个键盘记录的程序,从网上下载了很多,多数都是需要注册的,另外也多被杀软查杀.于是决定自己写一个,如果作为一个windows应用程序,可以实现抓取键盘的记录.想要实现随系统启动的话, ...

  4. [原创]cocos2dx加载网络图片&异步加载图片

    [动机] 之前看到一款卡牌游戏,当你要看全屏高清卡牌的时候,游戏会单独从网络上下载,本地只存了非高清的,这样可以省点包大小,所以我萌生了实现一个读取网络图片的类. [联想] 之前浏览网页的时候经常看到 ...

  5. 关于 REST

    REST(Representational State Transfer)是一种轻量级的 Web Service 架构风格,可以翻译成“表述性状态转移”,实现和操作明显比 SOAP 和 XML-RPC ...

  6. IIS部署Nodejs步骤

    需要iis的url重写插件 安装iisnode 配置文件 rewrite 节点需要url重写插件支持 node.exe 路径是你安装的路径 interceptor.js 是你安装iisnode的路径 ...

  7. 设计模式之美：Template Method（模板方法）

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Template Method 模式结构样式代码. 意图 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中. Templat ...

  8. Wix 安装部署教程(十一) ---QuickWix

    这次发布的是这两天做的一个WIX工具QuickWIX,主要解决两个问题点1.对大文件快速生成wix标签(files,Directories,ComponentRef):2.比较前后两次工程的差异.大的 ...

  9. Nim教程【七】

    这是国内第一个关于Nim的系列教程 先说废话 很开心,在今天凌晨快一点多的时候拿到了 nim-lang.com:nim-lang.cn:nim-lang.net 这三个域名,到不是为了投资,准备用ni ...

  10. 走进AngularJs(三)自定义指令-----（上）

    一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...