让 jQuery UI draggable 适配移动端

 

背景:

在移动端,本人要实现对某个元素的拖动,想到使用 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.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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/255165.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LAMP(7限定某个目录禁止解析php、 限制user_agent、 PHP相关配置、PHP扩展模块

限定某个目录禁止解析php防止***上传一个目录文件php&#xff0c;网站会从而解析php,对我们的网站有很大的危险。因此&#xff0c;我们需要在能上传文件的目录直接禁止解析PHP代码禁止步骤1.编辑虚拟主机配置文件&#xff1a;增添内容核心配置文件内容<Directory /data/wwwr…

编译器的功能是什么

1、编译器就是将“一种语言&#xff08;通常为高级语言&#xff09;”翻译为“另一种语言&#xff08;通常为低级语言&#xff09;”的程序。一个现代编译器的主要工作流程&#xff1a;源代码 (source code) → 预处理器(preprocessor) → 编译器 (compiler) → 目标代码 (obje…

八、走向三维

八、走向三维 我们前面花了七篇博文做铺垫&#xff0c;我们所做的一切努力都是为了最后的这一击——立体成像。因为玉米的这个系列文章是对双目视觉几何框架的总结。此处跳过匹配&#xff0c;假设左右图像点的完美匹配的。只看在几何上&#xff0c;三维坐标是如何被还原的。相对…

L~M方法

L~M方法&#xff1a; L~M&#xff08;Levenberg-Marquardt&#xff09;方法有些让人摸不清头脑。玉米觉得L~M让人困扰的主要原因有两点&#xff1a;一是L~M从何而来、二是L~M怎么样用&#xff1f;因为玉米也不是研究最优化理论的&#xff0c;所以玉米在这里用较为通俗的观点&a…

IDEA将项目上传至码云/GitHub托管

前言 好久都没有写博客了&#xff0c;由于博主之前一直都在上班处于加班的阶段&#xff0c;所以根本就没有时间去学习。现在请假回到学校写论文&#xff0c;有时间来学习了。 所以会不断的进行博客的更新&#xff0c;以及分享我在公司学到的一些新的技术&#xff0c;希望大家多…

cocos2dx游戏--欢欢英雄传说--添加攻击按钮

接下来添加攻击按钮用于执行攻击动作。同时修复了上一版移动时的bug。修复后的Player::walkTo()函数&#xff1a; void Player::walkTo(Vec2 dest) {if (_seq)this->stopAction(_seq);auto curPos this->getPosition();if (curPos.x > dest.x)this->setFlippedX(t…

Ceph分布式存储系统-性能测试与优化

测试环境 部署方案&#xff1a;整个Ceph Cluster使用4台ECS&#xff0c;均在同一VPC中&#xff0c;结构如图&#xff1a; 以下是 Ceph 的测试环境&#xff0c;说明如下&#xff1a; Ceph 采用 10.2.10 版本&#xff0c;安装于 CentOS 7.4 版本中&#xff1b;系统为初始安装&…

阅读好书依然是提升自己的高效方法:兼以作者的身份告诉大家如何选择书,以及高效学习的方法...

国内技术网站多如牛毛&#xff0c;质量高的网站也不少&#xff0c;博客园也算一个&#xff0c;各类文章数以百万计&#xff0c;我随便输入一个关键字&#xff0c;比如Spring Cloud&#xff0c;都能看到大量的技术文章和教学视频&#xff0c;我无意贬低技术文章和教学视频的作用…

TCP/IP 协议簇的逐层封装

在使用 TCP 协议的网络程序中&#xff0c;用户数据从产生到从网卡发出去一般要经过如下的逐层封装过程&#xff1a; 从下往上看&#xff1a; 1&#xff09;链路层通过加固定长度的首部、尾部来封装 IP 数据报(Datagram) 产生以太网帧(Frame)。 其中首部存在对封装数据的…

【开源程序(C++)】获取bing图片并自动设置为电脑桌面背景

众所周知&#xff0c;bing搜索网站首页每日会更新一张图片&#xff0c;张张漂亮&#xff08;额&#xff0c;也有一些不合我口味的&#xff09;&#xff0c;特别适合用来做电脑壁纸。 我们想要将bing网站背景图片设置为电脑桌面背景的通常做法是&#xff1a; 上网&#xff0c;搜…

UIProgressView 圆角

里面外面都变成圆角 不用图片 直接改变layer 重点是里面外面都是圆角哦 for (UIImageView * imageview in self.progress.subviews) { imageview.layer.cornerRadius 5; imageview.clipsToBounds YES; } 转载于:https://www.cnblogs.com/huoran1120/p/5563991.html

DataTables warning: Requested unknown parameter '0' from the data source for row '0'

问题&#xff1a;DataTables warning: Requested unknown parameter 0 from the data source for row 0 代码&#xff1a; <script type"text/javascript">var data [{"Name":"UpdateBootProfile","Result":"PASS",&…

我与Linux系统的交集

2019独角兽企业重金招聘Python工程师标准>>> 一、初识Linux 第一次知道Linux还是在我刚进大学的时候&#xff0c;从开始聊QQ、玩斗地主的时候起我就是用的Windows&#xff0c;从Windows2000一直到Windows7&#xff0c;当时我已经完全习惯了使用Windows&#xff0c;而…

IP头、TCP头、UDP头详解以及定义

一、MAC帧头定义 /*数据帧定义&#xff0c;头14个字节&#xff0c;尾4个字节*/ typedef struct _MAC_FRAME_HEADER { char m_cDstMacAddress[6]; //目的mac地址 char m_cSrcMacAddress[6]; //源mac地址 short m_cType;      //上一层协议类型&#xff0c;如…

基本 TCP 套接字编程讲解

基于 TCP 的套接字编程的所有客户端和服务器端都是从调用socket 开始&#xff0c;它返回一个套接字描述符。客户端随后调用connect 函数&#xff0c;服务器端则调用 bind、listen 和accept 函数。 使用套接口客户机服务器的的例子 sever.c #include <stdio.h> #include &…

怎样屏蔽微信朋友圈视频?局域网如何禁止员工看朋友圈视频?

上班时间刷刷朋友圈&#xff0c;一眨眼半小时就过去了。不但会影响工作效率&#xff0c;而且朋友圈的视频会占用大量的带宽。所以对企业管理人员来说&#xff0c;很多时候需要禁止员工在工作时段刷朋友圈。但是行政手段要和技术手段配合&#xff0c;才可以发挥真正的作用。本文…

cf414B(dp)

题目链接&#xff1a;http://codeforces.com/problemset/problem/414/B 题意&#xff1a;定义所有元素是其前一个元素的倍数的数列为good sequence&#xff0c;给出 n, 和 k&#xff0c;求1....n组成的长度为k的good sequence 的数目&#xff1b; 思路&#xff1a;dp 用dp[i][j…

增量值编码器、单圈绝对值编码器、多圈绝对值编码器

主流的伺服电机位置反馈元件包括增量值编码器&#xff0c;单圈绝对值编码器&#xff0c;多圈绝对值编码器&#xff0c;旋转变压器等。下面分别介绍&#xff1a; 增量值编码器增量式编码器是将位移转换成周期性的电信号&#xff0c;再把这个电信号转变成计数脉冲&#xff0c;用…

永磁交流伺服电机的工作原理与更换新编码器后的常规零位校正方法

http://wuhuotun.blog.163.com/blog/static/73085450200910655748516/ 永磁交流伺服电机的编码器相位为何要与转子磁极相位对齐 其唯一目的就是要达成矢量控制的目标&#xff0c;使d轴励磁分量和q轴出力分量解耦&#xff0c;令永磁交流伺服电机定子绕组产生的电磁场始终正交于…

理解Java中字符流与字节流的区别

1. 什么是流 Java中的流是对字节序列的抽象&#xff0c;我们可以想象有一个水管&#xff0c;只不过现在流动在水管中的不再是水&#xff0c;而是字节序列。和水流一样&#xff0c;Java中的流也具有一个“流动的方向”&#xff0c;通常可以从中读入一个字节序列的对象被称为输入…