开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jQuery UI Sortable在触摸屏设备上发生了什么？

在触摸屏设备上，jQuery UI Sortable 的行为可能会与预期不符，因为它是为桌面浏览器设计的。为了解决这个问题，您可以使用一些第三方库，如 jQuery Touch Punch，它可以将触摸事件转换为适当的鼠标事件，使得 jQuery UI Sortable 在触摸屏设备上正常工作。

要使用 jQuery Touch Punch，您需要将其添加到您的项目中，并在引入 jQuery 和 jQuery UI 之后引入它。这是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>jQuery UI Sortable on Touch Devices</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
    <ul id="sortable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
   <script>
        $("#sortable").sortable();
    </script>
</body>
</html>

在上面的示例中，我们首先引入了 jQuery 和 jQuery UI 的 CSS 和 JS 文件，然后引入了 jQuery Touch Punch。最后，我们使用 jQuery 选择器启用了 Sortable 功能。

现在，您的 jQuery UI Sortable 应该在触摸屏设备上正常工作。请注意，jQuery Touch Punch 可能不是最佳解决方案，因为它可能会影响性能。如果您需要更高效的解决方案，可以考虑使用专门为触摸屏设备优化的库。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jQuery Mobile 1.0 发布

经过一年多不断改进和完善后，jQuery Mobile 终于发布 1.0 正式版。什么是 jQuery Mobile？...jQuery Mobile 是一个基于 jQuery 的面向移动设备的网页前端用户界面框架，旨在简化移动设备的应用程序的过程，它几乎支持所有的移动浏览器的。...jQuery Mobile 功能特性跨平台跨设备 jQuery Mobile 框架兼容主流的设备，如 iOS（包括 iPhone，iPad），Andorid，黑莓，塞班，Windows Phone 等...，它让你非常容易就可以设计一个运行在所有的智能手机和平板设备上的 Web 程序。...触摸屏优化的布局和 UI WIDGETS jQuery Mobile 是触摸屏优化的，并且提供一个适应不同的智能设备的动态触摸用户界面，这套系统包含基本的布局控件（如列表，面板等），并且还有一套额外的表单控件和

4392 0

jQuery ui中sortable draggable droppable的使用

最近工作中用到了jQuery UI中排序和拖拽功能，花了大概一天的时间，搞清楚了大概的参数配置，以及遇到的一些问题，总结如下。...sortable 简单的配置如下： $('#subs-box').sortable({ axis: 'y', cursor: 'ns-resize', placeholder:...然而实际上，如果你不把第一次初始化的dropInit函数销毁掉，地方A在第二次初始化后还是可以放置的。所以需要在拖拽停止的时候，销毁上一次的dropInit对象。...selector = '.ptype-'+me.selectedSubType; $(selector).droppable("destroy"); }, 参考链接 https://www.html.cn/jquery-ui-api.../sortable/ https://www.html.cn/jquery-ui-api/draggable/ https://www.html.cn/jquery-ui-api/droppable

2K1 0

bootsrap+jquery+组件项目引入文件的常见报错报错一：Uncaught ReferenceError: $ is not defined报错二：jsp页面相对路径和绝对路径的问题：报错三：

做一个项目的时候，控制台总是会出现各种bug,其实不用慌张，终结起来也就几种类型的错误，在开发中每次遇到错误都善于总结，下次在看到就会胸有成竹知道是什么情况了，以下是在开发过程中总结的一些错误以及错误的解决方法...图片.png 原因：包括两个不同版本的jQuery UI。这可能会导致冲突。...尝试删除解决办法...报错四：Uncaught TypeError: $(...).sortable is not a function Uncaught TypeError: $(...).sortable is not...图片.png 解决方案：解决方案：将jquery.min.js放在bootstrap.min.js文件之前引用，bootstrap.min.css文件在整两个文件前后引用都无妨（测试多次）。

26.1K4 0

你无法检测到触摸屏

到目前为止我只在 Windows 8 里看到这种情况，但从理论上讲，它可以发生在任何操作系统。一些 BlackBerry OS 的版本也已被知道在非触摸设备上持久启用了触摸的接口。...最初的 iPhone （在2007年发布）是第一个支持 Touch Events 的设备，但是，从二十世纪70年代开始触摸屏已经以一种或另一种形式存在。...不管是 Safari 还是 Opera 都还没有在他们的桌面浏览器实现触摸接口，所以他们在触摸设备上也没有结果。...然而，这产生了三个严重需要注意的事项：在你知道结果之前，它需要有交互发生；如果没有触摸交互发生，你不知道这是因为没有触摸屏——（还是）仅仅是用户没有使用它；这个事件在不支持 Touch Events...悬停状态的处理 ¶ 当前的触摸屏并不能传输鼠标/光标悬浮状态, 所以，最好调整我们对于触摸屏的UI设计，以便在触摸屏上能够继续使用。当然，键盘也是不能悬停的。

1.9K2 0

【Wordpress】后台载入很慢

原因剖析：打开 F12 我们看一下是哪些资源在拖后腿，果不其然，我们看到 load-styles.php 和 load-script.php 这俩文件耗费了大几十秒！就是你，病因所在。 ?...我们来看看这俩文件都干了什么导致这么慢？...c=0&load%5B%5D=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable...wp-plupload,mediaelement-core,mediaelement-migrate,wp-mediaelement,wp-api-req&load%5B%5D=uest,media-views,jquery-ui-draggable...,jquery-ui-slider,jquery-touch-punch,iris,wp-color-picker&ver=5.2.1 这个链接在一起的 js 每次点击后台菜单或选项都会重新加载以便而不是从缓存中读取

2.3K2 0

开发者必备的12个JavaScript库

为了方便大家发挥自己的创意，就产生了很多 JS 框架，Node.js 扩展等等。有了这些工具，开发者们就能专注于创意设计了，而不用为某个功能而花费太多精力。...它依赖于jQuery，用来控制触摸设备上的多点触控特性。 ?...10) Metroui Metro UI CSS 是用来创建类似 Windows 8 Metro 界面风格的 CSS 样式/Javascript 库。 ?...12) Turnjs Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果，支持触摸屏设备。 Turn.js 支持硬件加速来让翻页效果更加平滑。...如果大家还有补充或者是对以上这些 JavaScript 库有什么使用心得，那么请在评论中与大家分享吧！

2.7K9 0

jQuery Mobile 教程 (1)

在找移动Web App开发的资料，发现了jQuery Mobile ，对它的设计理念是赞同的，因此简单的了解一下。...jQuery Mobile 简介项目目标——跨平台和跨设备（Seriously cross-platform & cross-device）这个javascript 类库是针对手机浏览器推出的 Javascript...CSS + Javascript 的网页在不同的终端浏览器上获得的效果基本一致，运算结果和效率仅仅跟 CPU 速度和浏览器的渲染速度相关。...这个mobile项目在UI的设计上专门为触摸屏幕做了优化（Touch-optimized layouts & UI widgets），看看下面的图片： ?...同样的，秉承jQuery UI的优良传统，jQuery Mobile 也是可以定制主题的（Themable designs: Bigger and better），据官方文档（we added support

1.6K6 0

那些前端常用的网站插件

Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js...插件 Barba.js — 流式页面过渡 TwentyTwenty — 一个对比图片的可视化 diff 工具 Vivus.js — 在 SVG 上绘制动画 Wow.js — 滚动时展现动画 Scrolline.js...漂亮的页面滚动元素动画 Handlebars.js — Javascript 模板 jInvertScroll — 视差滚动 One page scroll — 又一个页面滚动库 Parallax.js — 对智能设备方向变化做出响应的视差引擎...两列垂直反向滚动 Favico.js — 动态 favicon Midnight.js — 固定头部切换效果 Anime.js — 动画库 Keycode — 获取键盘按键的 JavaScript keycode Sortable...集合 Font awesome — Icon 集合 Font generator — 组合多个字体创建混合字体 On/Off switch — 使用 CSS 创建 on/off 开关、radio 按钮 UI

4.4K5 0

Python 的 GUI 开发工具原

Flexx 使用模块化设计，包含一些子系统： ui - UI 部件 app - 事件循环和服务器 react - reactive 编程 pyscript - Python to JavaScript...也可以使用前端框架，如 bootstrap, jQuery, jQuery UI 等。...Kivy和python一样具有出色的跨平台特性，使用Kivy编写的程序可以在Windows，Linux，和mac OSX系统之间无缝切换运行，而且具有本地显示效果，特别对触摸屏应用的支持较好，在非触摸屏上也可以配合鼠标模拟触摸效果...Kivy甚至可以运行在android和IOS设备上，具有极强的跨平台能力。...1、安装kivy 在ubuntu 14.04下面安装kivy非常简单，基本上一条命令就可以解决， apt-get install python-kivy 2、kivy官方网站 www.kivy.org

6.8K2 0

Vue.Draggable 文档总结

特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操作当需要完全控制时，可以抛出所有变化可以和现有的...和v-model不能共用从表现上没有看出不同 element String，默认div 就是标签在渲染后展现出来的标签类型也是包含拖动列表和插槽的外部标签可以用来兼容UI...== 'b') } } componentData Object,默认值:null 用来结合UI组件的，可以理解为代理了UI组件的定制信息包含两项:props和on props...用来代理UI组件需要绑定的属性（:） on用来代理UI组件需要绑定的事件（@） <draggable element="el-collapse" :list="list" :component-data...被移除的元素 moved：内部移动的 newIndex: 改变后的索引 oldIndex: 改变前的索引 element: 被移动的元素插槽提供一个footer插槽，在排序列表之下

8.6K2 0

前端常用插件

: 单页应用中一个用于处理导航栏的库 js.js: Javascript 实现的 javascript JIT jquery-ui: jQuery 团队开发的 UI 相关的前端库，功能强大 todomvc...，可以让我们根据不同的设备来为其定制响应的 Javascript 和 CSS jquery-qrcode: jQuery 插件，用来生成二维码 Wookmark-jQuery: jQuery 的一个插件...IOS 7 上 Switch 的 JS 实现, 支持 IE8 及以上浏览器 trix: Basecamp 公司出品的富文本编辑器，简洁小巧 sensor.js: 在智能移动设备浏览器上，通过HTML5的...api使用移动设备的功能。...Sortable: 现代浏览器上用于实现元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依赖 jQuery Swiper: 用于实现浏览器上的滑动切换效果，支持硬件加速 matter-js

4.7K6 1

十大移动开发平台

它还支持离线，所以你的用户可以在没有连接网络的情况下继续操作(当下次有连线的时候，再将数据同步到服务器中)。提供优秀的文档(这个项目拥有一个引导新用户入门的开发指南). 　　...可以查看其网站提供的示例页面，它例子展示了在多种移动设备平上的Jo应用情况。...zepto.js的语法借鉴并且兼容jQuery。 8. DHTMLX Touch 图片　　DHTMLX Touch是一个免费的HTML5/JavaScript框架，专门为触摸屏设备而优化。...这个框架其实就是将需要在移动设备上显示的部分页面以jQuery Mobile的默认主题显示，而不是实现一个全新完整的移动页面。　　...它的语法类似于jQuery和Prototype。　　与jQuery相似并不仅停留在语法上。比如可以像jQuery一样通过绑定和定义事件处理。

3.3K3 0

一次触摸，Android到底干了啥

WeTest 导读当我们在写带有UI的程序的时候，如果想获取输入事件，仅仅是写一个回调函数，比如(onKeyEvent,onTouchEvent….)...二、物理设备是如何将输入数据发送给内核的物理设备将数据发送给内核是通过设备驱动传输的，在linux下的/dev/input/目录下有几个设备文件,event0,event1,event2……… 这些设备文件实际上是驱动创建的...很好理解，触摸屏是一个物理设备，但是我们的驱动程序运行在CPU中，这是两个不同的设备，他们在物理上的连接是通过导线将对应的引脚相连接的，只不过导线在PCB板中很小，驱动程序就是初始化CPU中跟触摸屏连接的引脚...Android实际上是运行在linux内核上一组进程，这一组进程组合为用户提供UI,应用程序的安装等等服务。 ?...1、实际上取决于它背后的ViewRootImpl做了什么，在ViewRootImpl.java中的setView方法中,实例化InputChannel,当然会判断当前的窗口能不能接受输入事件,接着在调用到

8172 1

一次触摸，Android 到底干了啥

原文链接：http://wetest.qq.com/lab/view/349.html WeTest 导读当我们在写带有UI的程序的时候，如果想获取输入事件，仅仅是写一个回调函数，比如(onKeyEvent...event2……… 这些设备文件实际上是驱动创建的,他们共用一个主设备号，仅仅是次设备号不同,表示这是一类设备。...很好理解，触摸屏是一个物理设备，但是我们的驱动程序运行在CPU中，这是两个不同的设备，他们在物理上的连接是通过导线将对应的引脚相连接的，只不过导线在PCB板中很小，驱动程序就是初始化CPU中跟触摸屏连接的引脚...Android实际上是运行在linux内核上一组进程，这一组进程组合为用户提供UI,应用程序的安装等等服务。...1、实际上取决于它背后的ViewRootImpl做了什么，在ViewRootImpl.java中的setView方法中,实例化InputChannel,当然会判断当前的窗口能不能接受输入事件,接着在调用到

3K1 0

2019年最全的web前端知识体系汇总

developer.mozilla.org/zh-CN/docs/Web/CSS · JavaScript: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript UI...Mobile: http://jquerymobile.com/ · KendoUI:http://www.telerik.com/kendo-ui · Goratchet:http://goratchet.com...插件 · Barba.js—流式页面过渡 · TwentyTwenty—一个对比图片的可视化 diff 工具 · Vivus.js—在 SVG 上绘制动画 · Wow.js—滚动时展现动画 · Scrolline.js...漂亮的页面滚动元素动画 · Handlebars.js—Javascript 模板 · jInvertScroll—视差滚动 · One page scroll—又一个页面滚动库 · Parallax.js—对智能设备方向变化做出响应的视差引擎...· Favico.js—动态 favicon · Midnight.js—固定头部切换效果 · Anime.js—动画库 · Keycode—获取键盘按键的 JavaScriptkeycode · Sortable

2.8K0 0

Vue 实现表格搜索、固定表头与排序原

在搜索完，删除搜索内容后展示所有的内容，用computed就比较容易实现，思路：v-model绑定搜索关键字，在tbody的tr上v-for循环计算属性。...-- 引入样式 --> ...stripe style="width: 100%" v-bind:height="height" > <!

2.5K3 0

(长文预警) 你还在烦工作中碰到的拖拽问题？一个框架jiejue

Sortablejs 简介 Sortable —是一个JavaScript库，用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。...我们在加上 revertClone: true ? pull, put 可以为 funtion 这个就扩大了拖拽放置的功能了，显得没那么死板，为什么呢？...delayOnTouchOnly 选项是否仅在用户使用触摸（例如，在移动设备上）时才应用延迟。在任何其他情况下，都不会延迟。...: function(/**Event*/evt) { evt.item // The spilled item } }); 自动滚屏此插件可让页面在移动设备和IE9上可滚动元素的边缘附近拖动时...交换插件该插件修改了Sortable的行为，以允许项目彼此交换而不是进行排序。一旦开始拖动，用户就可以将其拖动到其他项目上，并且元素不会发生任何变化。但是，用户放置的项目将与原始拖动的项目交换 ?

7K1 0

再见Metro，Windows 10通用应用设计趋势分析 - 腾讯ISUX

众所周知，当初微软在Windows 8上做了非常大胆的变革，除了开创性的Metro设计语言，传统桌面和平板两种模式的融合也是一大特色，可这两种操作模式在使用体验上的不一致也成为Windows 8饱受用户诟病的原因之一...系统新特性首先，我们先来了解几点与应用设计相关的一些系统特性： · 通用应用（Windows Apps）在微软Windows 10发布会上，通用应用（已经由Universal Apps更名为Windows...这套控件的视觉元素和交互体验都是整体一致的，但针对不同的操作场景和设备有细微不同的体现，比如触摸屏、应用弹出控件等，当用户触摸时自动使用较大面积按钮，使用键盘时与之相反。 ?...图为在桌面和平板模式下开始菜单的不同样式。 ? 二. 设计趋势分析再来看看Windows 10上的官方应用对比Windows 8上的版本有什么不同：应用商店（平板） ? ?...· 不同设备和操作场景需要定制化设计虽然在理论上开发者可以通过一次编写和一套UI使通用应用在所有Windows平台上运行，但根据实际情况来看，小尺寸的设备界面并不等同于大尺寸的设备界面缩小为窗口化时的效果

1.2K4 0

实习杂记（27）：android的touch Mode

，但是实际上Android设备也支持键盘操作，允许通过键盘来完成导航，点击，输入等。 ...但是，当用户使用触摸屏与设备交互的时候，始终聚焦当前UI元素就没有必要了，而且很丑陋；用户点击哪个元素，哪个元素就是当前元素，无需高亮标识。...并且，通过触摸屏与设备交互的时候，点击某个UI元素也不会导致该元素聚焦，此时的高亮效果是由Pressed状态来完成的。...当用户开始通过键盘与设备交互的时候，设备就退出Touch Mode模式；当用户开始通过触摸屏与设备交互的时候，设备就进入Touch Mode模式。...有些UI元素，即使是在Touch Mode的状态之下，也需要获得焦点，典型的就是Edittext。那么，这种情况该如何处理呢？答案就是做特殊处理。

6812 0

jquery mobile 移动web(6)

jquery mobile 针对移动端设备的事件类型。　　1.touch 事件。　　　　tap 快速触摸屏幕并且离开，类似一种完整的点击操作。　　　　...taphold 触摸屏幕并保持一段时间。　　　　swipe 在1秒内水平移动30px屏幕像素上时触发。　　　　...2.方向改变事件　　　　orientationchange 事件函数当移动设备的方向发生改变触发，在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数，　　　　该参数有两种返回值：portrait...ui.prevPage) 　　　　　　}) 　　5.模拟鼠标事件　　　　vmouseover 统一处理触摸和鼠标悬停事件。　　　　...　　　　　　 data:$("form#search").serizlize(); 　　　　 }) 数据存储：　　1.jqmData()方法; 　　　　可以在元素上绑定任意数据

1.3K10 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭