首页 > 其他分享 >关于SortableJS在handle模式下移动端无法拖拽的解决办法

关于SortableJS在handle模式下移动端无法拖拽的解决办法

时间:2024-01-30 14:14:41浏览次数:20  
标签:handle mobile SortableJS let userAgent 移动 拖拽 match const

原因

个人项目使用到了这个库,PC操作好好的,移动端一看不行,然后去官方github-issues查看搜mobile的issue,发现大家也会这样。找了一圈看了下,应该是handle(句柄)模式下,库没有做事件监听导致的。

解决办法

要么换个库,要么在移动端的时候,取消句柄模式即可。

const wrapper: HTMLElement = document.querySelector(
  ".el-checkbox-group>.el-space"
);

const config: Sortable.Options = {
  animation: 300,
  handle: ".drag-btn",
  onEnd: ({ newIndex, oldIndex, item }) => {
    // ...
  },
};

if (isMobile) {
  // 这个不知道有没有用,待测试
  config.touchStartThreshold = 100;
  // 移动端不支持handle
  delete config.handle;
}
Sortable.create(wrapper, config);

PS:判断是否在移动端可以参考下列方法

要判断项目是否在移动端打开,可以利用浏览器的 User Agent(用户代理)来判断。用户代理是浏览器发送给服务器的一串字符串,它包含了关于浏览器和操作系统的信息。

在 Vue.js 3 中,可以使用 window.navigator.userAgent 获取当前浏览器的用户代理字符串。然后,你可以使用正则表达式或现有的库来判断用户代理字符串是否表示移动设备。

以下是一个示例,使用正则表达式来判断用户代理字符串是否表示移动设备:

这个正则表达式匹配了一些常见的移动设备的关键词,如果用户代理字符串中包含其中之一,就会被判断为移动设备。

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(window.navigator.userAgent);

或者可以使用这个:(

标签:handle,mobile,SortableJS,let,userAgent,移动,拖拽,match,const
From: https://www.cnblogs.com/crispyChicken/p/17996949

相关文章

  • [Typescript] Handle CommonJS import in Typescript
    Let'ssayweneedtousealibrarywithcommonJScode.classMelon{cutIntoSlices(){}}module.exports=MelonThenwewanttoimportthisinsideourTypescriptproject:import*asmelonNamespacefrom"./melon"//typescriptdoesn......
  • Springcloud学习笔记61---Spring MVC的拦截器HandlerInterceptor
    1. HandlerMethod介绍HandlerMethod它作为SpringMVC的非公开API,可能绝大多数小伙伴都对它比较陌生,但我相信你对它又不是那么的生疏,因为你可能没用过但肯定见过。比如SpringMVC的拦截器HandlerInterceptor的拦截方法的第三个入参Objecthandler,虽然它是Object类型,但其实绝大部......
  • 关于does not have a method xx to handle event "tap"我有话要说
    前言>我正在对接微信小程序订阅消息功能,看了官方文档觉得挺简单的。于是踩坑开始了######应该是这样简单的```wx.requestSubscribeMessage({tmplIds:[''],success(res){}})```######你直接调用会得到`订阅失败{errMsg:"requestSubscribeMessage:failcanonlybein......
  • vue2 手写思维导图编辑器,支持图片和节点拖拽(2)
    弹框模块DigitalXmindDialog.vue<template><el-dialog:title="title"width="1200px"class="auth-dialog"top="5%":append-to-body="true":lock-scroll="false":c......
  • vue2 手写思维导图编辑器,支持图片和节点拖拽(1)
    效果图:支持图片粘贴和布局重新计算可拖拽: 代码结构DigitalXmindDialog.vue//弹框VueXmind//脑图编辑器index.vue//主体编辑器XmindNode.vue//节点文件XmindSvgLine.vue//脑图底部的svg线段绘画板NodeAttributes.vue//右侧主题设置模块XmindStyleMixins......
  • sortable.js el-table 树形表 拖拽
    实现的功能:该树形表只有一级子节点该子节点只能在当前父节点中拖拽,不能跨父节点拖拽同时只能展开一个父节点,其他父节点闭合实现的关键点:mounted挂载初始化sortable拖拽完onEnd方法返回的index是整个列表的排序,要扁平化数组调用该方法getTable()后台多返回一个kid,......
  • 实现流程化办公,快看看自定义拖拽表单!
    一直以来,流程化办公是很多企业的梦想和追求,因为可以帮助企业提高办公效率,降低人工成本,高效利用企业内部数据,做好办公协作工作。自定义拖拽表单优势明显、操作简单、功能灵活、可视化设计,是理想的流程化办公助力利器。众所周知,随着办公流程管理的规范化和体系化发展,各部门之间的协......
  • 低代码开发:拖拽式可视化构建工业物联网系统
    以速度为后盾的创新是当今各种规模组织的基础。在这个持续数字化变革的时代,每个组织都必须随时准备创新。低编码就是这样的创新。Gartner预测,到2024年,65%的应用程序开发项目将依赖于低代码开发。什么是低代码?低代码(LowCode)是一种可视化的软件开发方法,通过最少的手动编码可以......
  • Table 变身记:Element-Plus携手SortableJS打造可拖拽式体验
    使用element-plus的el-table组件创建出来的table。结合sortable.js实现行拖动排序。安装包npminstall-Dsortablejs使用官方table示例代码<template><el-table:data="tableData"style="width:100%"><el-table-columnprop="date"label=&quo......
  • 利用aop、拦截器HandlerInterceptor来实现接口限流,日志收集
    前言:aop是面向切面编程,通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术。拦截器是web请求中一个请求周期中的一环就实现接口限流这个需求来说,用aop和HandlerInterceptor都可以来实现,就是在调用接口之前做一些约束而已。aop+自定义注解+Semaphore实现接口限流自......