https://liuqi.cool/static/js/async/7398.e03282d1.js

1"use strict";(self.webpackChunkrspress_doc_template=self.webpackChunkrspress_doc_template||[]).push([["7398"],{1934:function(e,n,d){d.r(n),d.d(n,{default:()=>i});var s=d(2676),c=d(453);function r(e){let n=Object.assign({h1:"h1",a:"a",h2:"h2",h3:"h3",p:"p",code:"code",blockquote:"blockquote",pre:"pre",ul:"ul",li:"li",br:"br"},(0,c.ah)(),e.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.h1,{id:"拖拽相关",children:["拖拽相关",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#拖拽相关",children:"#"})]}),"\n",(0,s.jsxs)(n.h2,{id:"移动端拖拽相关",children:["移动端拖拽相关",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#移动端拖拽相关",children:"#"})]}),"\n",(0,s.jsxs)(n.h3,{id:"touch-事件触发位置问题",children:["touch 事件触发位置问题",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#touch-事件触发位置问题",children:"#"})]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"touchstart"}),"、",(0,s.jsx)(n.code,{children:"touchmove"}),"和",(0,s.jsx)(n.code,{children:"touchend"}),"触发的鼠标事件的",(0,s.jsx)(n.code,{children:"target"}),"都是起始元素，获取不了结束时的元素"]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["解决方案：使用",(0,s.jsx)(n.code,{children:"document.elementFromPoint"}),"通过",(0,s.jsx)(n.code,{children:"pageX"}),"和",(0,s.jsx)(n.code,{children:"pageY"}),"去获取元素"]}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"const event = e || window.event;\r\nconst element = document.elementFromPoint(\r\n  event.changedTouches[0].pageX,\r\n  event.changedTouches[0].pageY\r\n);\r\nif (element) {\r\n  console.table(element);\r\n}\n"})}),"\n",(0,s.jsxs)(n.h3,{id:"拖拽交互问题",children:["拖拽交互问题",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#拖拽交互问题",children:"#"})]}),"\n",(0,s.jsx)(n.p,{children:"移动端在长时间触摸后拖拽时会触发页面滚动，不能用常规思路实现拖拽"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["解决方案 1","\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["在需要起始位置双击，激活拖拽模式，记录当前位置为起始点",(0,s.jsx)(n.br,{}),"\n","拖拽记录手指划过位置记录为结束点",(0,s.jsx)(n.br,{}),"\n","在需要结束的位置双击，关闭拖拽模式，记录当前位置为结束点"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["解决方案 2","\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsx)(n.p,{children:"开始拖拽时禁用滚动条"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.h2,{id:"pc-端相关",children:["PC 端相关",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#pc-端相关",children:"#"})]}),"\n",(0,s.jsxs)(n.h3,{id:"mousedowen-偶尔会触发元素的拖动事件",children:["mouseDowen 偶尔会触发元素的拖动事件",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#mousedowen-偶尔会触发元素的拖动事件",children:"#"})]}),"\n",(0,s.jsxs)(n.p,{children:["拖拽选取事件的交互采用伪拖拽方式实现，即监听鼠标落下、鼠标划过、鼠标抬起三个事件触发节点的位置，计算出拖拽的时间块。偶尔会触发节点的拖拽事件，设置",(0,s.jsx)(n.code,{children:"draggle=false"}),"无效"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"解决方案： 阻止背景块拖拽事件的默认行为"}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"onDragStart={(e) => {\r\n  e.preventDefault();\r\n  e.stopPropagation();\r\n}}\n"})}),"\n",(0,s.jsxs)(n.h3,{id:"鼠标右键也会触发-mousedowen",children:["鼠标右键也会触发 mouseDowen",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#鼠标右键也会触发-mousedowen",children:"#"})]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["可以通过",(0,s.jsx)(n.code,{children:"event.button"}),"的值判断点击的是左键还是右键"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["在",(0,s.jsx)(n.code,{children:"Chrome"}),"浏览器中"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"0：鼠标左键"}),"\n",(0,s.jsx)(n.li,{children:"1：鼠标中键"}),"\n",(0,s.jsx)(n.li,{children:"2：鼠标右键"}),"\n"]}),"\n",(0,s.jsxs)(n.h2,{id:"其他",children:["其他",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#其他",children:"#"})]}),"\n",(0,s.jsxs)(n.h3,{id:"判断当前是-pc-端还是移动端",children:["判断当前是 PC 端还是移动端",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#判断当前是-pc-端还是移动端",children:"#"})]}),"\n",(0,s.jsxs)(n.p,{children:["由于移动端各种浏览器的",(0,s.jsx)(n.code,{children:"magic"}),"标识，区分起来很费力"]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["参考方案：默认为",(0,s.jsx)(n.code,{children:"web"}),"，如果触发了",(0,s.jsx)(n.code,{children:"touch"}),"事件视为移动端"]}),"\n"]}

1),"\n",(0,s.jsxs)(n.h3,{id:"多个时间段先求并集再求补集的情况",children:["多个时间段先求并集再求补集的情况",(0,s.jsx)(n.a,{className:"header-anchor","aria-hidden":"true",href:"#多个时间段先求并集再求补集的情况",children:"#"})]}),"\n",(0,s.jsxs)(n.p,{children:["业务场景：一个专家在某一个天可能有多个排班时间段，需要求取专家没有排班的时间段 例如：\r\n在",(0,s.jsx)(n.code,{children:"2023年3月2日"}),"专家有三个班次"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["班次 A：",(0,s.jsx)(n.code,{children:"8:00"})," - ",(0,s.jsx)(n.code,{children:"10:00"})]}),"\n",(0,s.jsxs)(n.li,{children:["班次 B：",(0,s.jsx)(n.code,{children:"9:30"})," - ",(0,s.jsx)(n.code,{children:"13:00"})]}),"\n",(0,s.jsxs)(n.li,{children:["班次 C：",(0,s.jsx)(n.code,{children:"15:00"})," - ",(0,s.jsx)(n.code,{children:"24:00"}),"\r\n假设医院的上班时间段为 G：",(0,s.jsx)(n.code,{children:"8:00"})," - ",(0,s.jsx)(n.code,{children:"22:00"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"常规思路"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["定义一个数组 ",(0,s.jsx)(n.code,{children:"A1"})," 用于存放禁用时间区间的数组 ",(0,s.jsx)(n.code,{children:"A1"}),(0,s.jsx)(n.br,{}),"\n","遍历该专家的三个班次",(0,s.jsx)(n.br,{}),"\n","每次判断数组 ",(0,s.jsx)(n.code,{children:"A1"})," 中是否有范围",(0,s.jsx)(n.br,{}),"\n","如果没有通过当前范围和时间维度划分出禁用区间放进去",(0,s.jsx)(n.br,{}),"\n","如果有，对比当前范围和禁用区间，逐步减少禁用区间"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"空间思路"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["将每一分钟当做一个最小单位",(0,s.jsx)(n.br,{}),"\n","定义一个长度为 ",(0,s.jsx)(n.code,{children:"24 * 60 - 1"})," 的数组 ",(0,s.jsx)(n.code,{children:"A2"}),"（对应 ",(0,s.jsx)(n.code,{children:"00:00"}),"~",(0,s.jsx)(n.code,{children:"23:59"}),"）全部填充为 ",(0,s.jsx)(n.code,{children:"0"}),(0,s.jsx)(n.br,{}),"\n","遍历这个三个班次",(0,s.jsx)(n.br,{}),"\n","找到班次起始时间对应数组 ",(0,s.jsx)(n.code,{children:"A2"})," 的 ",(0,s.jsx)(n.code,{children:"indexS"})," 和截止时间对应的 ",(0,s.jsx)(n.code,{children:"indexE"}),(0,s.jsx)(n.br,{}),"\n","将对应区间的数字全部填充为 ",(0,s.jsx)(n.code,{children:"1"}),(0,s.jsx)(n.br,{}),"\n","遍历结束后统计数组 ",(0,s.jsx)(n.code,{children:"A2"})," 中所有 ",(0,s.jsx)(n.code,{children:"1"})," 的位置可以取到并集，所有 ",(0,s.jsx)(n.code,{children:"0"})," 的位置可以取到并集的补集"]}),"\n"]})]})}function h(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,c.ah)(),e.components);return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(r,{...e})}):r(e)}let i=h;h.__RSPRESS_PAGE_META={},h.__RSPRESS_PAGE_META["zh%2Fblog%2Fbug%2Fdrag.mdx"]={toc:[{text:"移动端拖拽相关",id:"移动端拖拽相关",depth:2},{text:"touch 事件触发位置问题",id:"touch-事件触发位置问题",depth:3},{text:"拖拽交互问题",id:"拖拽交互问题",depth:3},{text:"PC 端相关",id:"pc-端相关",depth:2},{text:"mouseDowen 偶尔会触发元素的拖动事件",id:"mousedowen-偶尔会触发元素的拖动事件",depth:3},{text:"鼠标右键也会触发 mouseDowen",id:"鼠标右键也会触发-mousedowen",depth:3},{text:"其他",id:"其他",depth:2},{text:"判断当前是 PC 端还是移动端",id:"判断当前是-pc-端还是移动端",depth:3},{text:"多个时间段先求并集再求补集的情况",id:"多个时间段先求并集再求补集的情况",depth:3}],title:"拖拽相关",headingTitle:"拖拽相关",frontmatter:{}}}}]);