jQuery UI Sortable在触摸屏设备上发生了什么？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

使用 Sortable.js 库实现 Vue3 elementPlus 的 el-table 拖拽排序

在开发过程中，我们经常需要处理表格数据，并为用户提供便捷的排序方式。特别是在需要管理长列表、分类数据或动态内容时，拖拽排序功能显得尤为重要。...它不依赖于 jQuery 或其他大型框架，能够独立工作，并且兼容包括 IE9 及以上版本在内的现代浏览器以及移动触摸设备。这使得Sortable.js成为跨平台Web开发项目的理想选择。...触摸友好：针对移动端优化，能够在触摸屏设备上提供流畅的拖拽体验。...[]; nextTick(async () => { xxx = arr; // 数据处理 // ... // 提交后后台数据进行排序 // ... }); } 总结在本文中...在未来的项目中，这种拖拽排序的实现方法可以为开发者节省时间，提高工作效率，同时也能提升最终产品的用户体验。希望本文能够帮助开发者更好地理解和实现这一功能，为日常开发提供支持。

4.7K1 1

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 是触摸屏优化的，并且提供一个适应不同的智能设备的动态触摸用户界面，这套系统包含基本的布局控件（如列表，面板等），并且还有一套额外的表单控件和

7302 0

您找到你想要的搜索结果了吗？

是的

没有找到

项目引入文件的常见报错

做一个项目的时候，控制台总是会出现各种bug,其实不用慌张，终结起来也就几种类型的错误，在开发中每次遇到错误都善于总结，下次在看到就会胸有成竹知道是什么情况了，以下是在开发过程中总结的一些错误以及错误的解决方法...：正常路径：html里面的…/…/，改成jsp页面就找不到路径了，这个时候成了这个鬼样子这时候，只需要在文件里面加入这段代码：解决办法：在和之间插入以下代码 <% String path...UI。...尝试删除 jquery-ui.min.js"> 解决办法...#报错四：Uncaught TypeError: $(…).sortable is not a function Uncaught TypeError: $(...).sortable is not a

2690 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

3.3K1 0

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

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

27K4 0

前端项目里常见的十种报错及其解决办法

(Internal Server Error) 图片.png 只是注释了js里面隔行换色的代码，表格就加载不出来了，按f12键查看控制台network,按F5刷新如下图片.png 对于这种莫名其妙，上一秒还能正常显示...，下次在看到就会胸有成竹知道是什么情况了，以下是在开发过程中总结的一些错误以及错误的解决方法。...jQuery UI。...尝试删除 jquery-ui.min.js"> 解决办法...报错九：Uncaught TypeError: $(...).sortable is not a function Uncaught TypeError: $(...).sortable is not

9861 0

前端项目里常见报错

of 500 (Internal Server Error) 只是注释了js里面隔行换色的代码，表格就加载不出来了，按f12键查看控制台network,按F5刷新如下对于这种莫名其妙，上一秒还能正常显示...，下次在看到就会胸有成竹知道是什么情况了，以下是在开发过程中总结的一些错误以及错误的解决方法。...UI。...尝试删除 jquery-ui.min.js"> 解决办法...#报错九：Uncaught TypeError: $(…).sortable is not a function Uncaught TypeError: $(...).sortable is not a

4220 0

你无法检测到触摸屏

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

2.5K2 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.9K2 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 库有什么使用心得，那么请在评论中与大家分享吧！

3.1K9 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

2K6 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

5.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

8.3K2 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插槽，在排序列表之下

13K2 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

5.9K6 1

Ext基础

核心技能部分 1.1 Ext简介 1.1.1 Ext发展史 Ext最早是在YUI库的基础上扩展开来的，因此Ext早期被称为 Yui-Ext。...这样，Jack Slocum在写技术博客的同时以 Yui-Ext的形式开放自己编写的 UI，包括 Grid、Tree等UI组件。...在 Jack 的开发和社区氛围的营造下，Yui-Ext 已经成为一个成熟的 Ajax UI框架，且此框架是独立的，不受 YUI 的影响并兼容 JQuery、Prototype 等多种JS库。...JQuery、Prototype 和 YUI都属于核心的 JS 库。虽然 YUI、JQuery 各自构建了一系列 UI 器件（Widget），但没有一个真正整合良好、完整的程序开发平台。...什么是 Ext JS？ 2. Ext JS组件包括哪些？

2.5K1 0

十大移动开发平台

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

4.8K3 0

Bootstrap Table强大的web数据表格渲染框架

Bootstrap Table 是什么‌Bootstrap Table 是一个基于 Bootstrap 框架的开源插件，专为快速构建功能丰富、响应式的数据表格而设计。‌...它支持排序、分页、搜索、导出等核心功能，并兼容多种 CSS 框架（如 Semantic UI、Material Design 等），适用于企业级系统的数据展示需求Bootstrap Table 框架深度解析在...通过data-responsive="true"启用智能列隐藏，移动端自动切换为堆叠视图弹性单位支持：兼容百分比 / 像素 / 视口单位，配合 Bootstrap 栅格系统实现动态布局触摸优化：针对移动设备优化滑动操作...https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.css">jquery...charts 移动端应用触摸优化、智能列隐藏responsive, mobile（二）性能优化建议大数据处理：启用data-virtual-scroll="100"配合后端分页，单次请求数据量控制在

6670 0

一次触摸，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,当然会判断当前的窗口能不能接受输入事件,接着在调用到

3.4K1 0

一次触摸，Android到底干了啥

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

1.1K2 1

点击加载更多

使用 Sortable.js 库实现 Vue3 elementPlus 的 el-table 拖拽排序

jQuery Mobile 1.0 发布

项目引入文件的常见报错

jQuery ui中sortable draggable droppable的使用

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

前端项目里常见的十种报错及其解决办法

前端项目里常见报错

你无法检测到触摸屏

【Wordpress】后台载入很慢

开发者必备的12个JavaScript库

jQuery Mobile 教程 (1)

那些前端常用的网站插件

Python 的 GUI 开发工具原

Vue.Draggable 文档总结

前端常用插件

Ext基础

十大移动开发平台

Bootstrap Table强大的web数据表格渲染框架

一次触摸，Android 到底干了啥

一次触摸，Android到底干了啥

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐