{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/plus/dragMove","result":{"data":{"current":{"frontmatter":{"title":"DragMove 拖拽移动","order":31,"brief":"可通过拖拽改变位置","icon":"doc-dragmove"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#限制拖动范围","title":"限制拖动范围"},{"url":"#自定义触发拖动的元素","title":"自定义触发拖动的元素"},{"url":"#自定义拖动后的位置处理","title":"自定义拖动后的位置处理"},{"url":"#api","title":"API"}]}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 31,\n  \"category\": \"Plus\",\n  \"title\": \"DragMove 拖拽移动\",\n  \"icon\": \"doc-dragmove\",\n  \"dir\": \"column\",\n  \"brief\": \"可通过拖拽改变位置\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u4E8E\\u8BBE\\u7F6E\\u5143\\u7D20\\u53EF\\u88AB\\u62D6\\u52A8\\u6539\\u53D8\\u4F4D\\u7F6E\\uFF0C\\u652F\\u6301\\u9650\\u5236\\u62D6\\u62FD\\u8303\\u56F4\\uFF0C\\u652F\\u6301\\u81EA\\u5B9A\\u4E49\\u89E6\\u53D1\\u62D6\\u52A8\\u7684\\u5143\\u7D20\\u3002\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"DragMove \\u4ECE v2.71.0 \\u5F00\\u59CB\\u652F\\u6301\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { DragMove } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u88AB \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"DragMove\"), \" \\u5305\\u88F9\\u7684\\u5143\\u7D20\\u5C06\\u80FD\\u591F\\u901A\\u8FC7\\u62D6\\u62FD\\u6539\\u53D8\\u4F4D\\u7F6E\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"em\", {\n    parentName: \"strong\"\n  }, \"\\u6CE8\\u610F\"))), mdx(\"ol\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"DragMove \\u4F1A\\u5C06\\u53EF\\u62D6\\u62FD\\u7684\\u5143\\u7D20\\u8BBE\\u7F6E\\u4E3A absolute \\u5B9A\\u4F4D\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"DragMove \\u9700\\u8981\\u5C06 DOM \\u4E8B\\u4EF6\\u76D1\\u542C\\u5668\\u5E94\\u7528\\u5230 children \\u4E2D\\uFF0C\\u5982\\u679C\\u5B50\\u5143\\u7D20\\u662F\\u81EA\\u5B9A\\u4E49\\u7684\\u7EC4\\u4EF6\\uFF0C\\u4F60\\u9700\\u8981\\u786E\\u4FDD\\u5B83\\u80FD\\u5C06\\u5C5E\\u6027\\u4F20\\u9012\\u81F3\\u5E95\\u5C42\\u7684 DOM \\u5143\\u7D20\\u3002\\u652F\\u6301\\u4EE5\\u4E0B\\u7C7B\\u578B\\u7684 children\\uFF1A\", mdx(\"ol\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Class Component\\uFF0C\\u4E0D\\u5F3A\\u5236\\u7ED1\\u5B9Aref\\uFF0C\\u4F46\\u9700\\u8981\\u786E\\u4FDD props \\u53EF\\u88AB\\u900F\\u4F20\\u81F3\\u771F\\u5B9E\\u7684 DOM \\u8282\\u70B9\\u4E0A\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4F7F\\u7528 forwardRef \\u5305\\u88F9\\u540E\\u7684\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\uFF0C\\u5C06 props \\u4E0E ref \\u900F\\u4F20\\u5230 children \\u5185\\u771F\\u5B9E\\u7684 DOM \\u8282\\u70B9\\u4E0A\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u771F\\u5B9E DOM \\u8282\\u70B9, \\u5982 span\\uFF0Cdiv\\uFF0Cp...\")))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useRef, useEffect } from 'react';\\nimport { DragMove } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  return (\\n    <DragMove>\\n      <div \\n        style={{ backgroundColor: 'var(--semi-color-primary)',width: 80, height: 80, \\n          display: 'flex', alignItems: 'center',justifyContent: 'center', \\n          borderRadius: 10, fontWeight: 500,\\n          position: 'absolute',  color: 'rgba(var(--semi-white), 1)'\\n        }} \\n      >Drag me</div>\\n    </DragMove>\\n  );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9650\\u5236\\u62D6\\u52A8\\u8303\\u56F4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"constrainer\"), \", \\u8BE5\\u51FD\\u6570\\u8FD4\\u56DE\\u9650\\u5236\\u53EF\\u62D6\\u62FD\\u8303\\u56F4\\u7684\\u5143\\u7D20\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"em\", {\n    parentName: \"strong\"\n  }, \"\\u6CE8\\u610F\\uFF1Aconstrainer \\u8BBE\\u7F6E\\u7684\\u5143\\u7D20\\u9700\\u8981\\u4E3A relative \\u5B9A\\u4F4D\"))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useRef, useEffect } from 'react';\\nimport { DragMove } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const containerRef = React.useRef();\\n\\n  return (\\n    <div \\n      style={{ \\n        backgroundColor: 'rgba(var(--semi-grey-2), 1)', \\n        width: 300, height: 300, padding: 5, position: 'relative', \\n        color: 'rgba(var(--semi-white), 1)', fontWeight: 500,\\n      }} \\n      ref={containerRef}\\n    >\\n      <span>Constrainer</span>\\n      <DragMove\\n        constrainer={() => containerRef.current}\\n      >\\n      <div \\n          style={{ backgroundColor: 'var(--semi-color-primary)', \\n            width: 80, height: 80, borderRadius: 10,\\n            display: 'flex', alignItems: 'center', justifyContent: 'center',\\n            position: 'absolute', top: 80, left: 80,\\n          }}\\n        >Drag me</div>\\n      </DragMove>\\n    </div>\\n  )\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u89E6\\u53D1\\u62D6\\u52A8\\u7684\\u5143\\u7D20\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"handler\"), \" \\u81EA\\u5B9A\\u4E49\\u89E6\\u53D1\\u62D6\\u52A8\\u7684\\u5143\\u7D20\\u3002\\u5982\\u679C\\u4E0D\\u8BBE\\u7F6E, \\u5219\\u70B9\\u51FB\\u4EFB\\u610F\\u4F4D\\u7F6E\\u5747\\u53EF\\u62D6\\u52A8\\uFF1B\\u5982\\u679C\\u8BBE\\u7F6E\\uFF0C\\u5219\\u4EC5\\u70B9\\u51FB handler \\u90E8\\u5206\\u53EF\\u62D6\\u52A8\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useRef, useEffect } from'react';\\nimport { IconTransparentStroked } from '@douyinfe/semi-icons';\\nimport { DragMove } from '@douyinfe/semi-ui';\\n\\nfunction Demo(){\\n  const handlerRef = React.useRef();\\n  const containerRef = React.useRef();\\n\\n  return (\\n    <div \\n      style={{ backgroundColor: 'rgba(var(--semi-grey-2), 1)', \\n        width: 300, height: 300, padding: 5, position: 'relative', \\n        color: 'rgba(var(--semi-white), 1)', fontWeight: 500,\\n      }} \\n      ref={containerRef}\\n    >\\n      <span>Constrainer</span>\\n      <DragMove\\n        handler={() => handlerRef.current}\\n        constrainer={() => containerRef.current}\\n      >\\n        <div \\n          style={{ \\n            backgroundColor: 'var(--semi-color-primary)', \\n            width: 80, height: 80, borderRadius: 10,\\n            position: 'absolute', top: 50, left: 50,\\n            display: 'flex', alignItems: 'center', justifyContent: 'center',\\n          }}\\n        >\\n          <div \\n              style={{ width: 'fit-content', height: 'fit-content' }} \\n              ref={handlerRef}\\n          ><IconTransparentStroked size={'large'}/></div>\\n        </div>\\n      </DragMove>\\n    </div>\\n  )\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u62D6\\u52A8\\u540E\\u7684\\u4F4D\\u7F6E\\u5904\\u7406\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"customMove\"), \" \\u81EA\\u5B9A\\u4E49\\u62D6\\u52A8\\u540E\\u7684\\u4F4D\\u7F6E\\u5904\\u7406\\uFF0C\\u8BE5\\u53C2\\u6570\\u8BBE\\u7F6E\\u540E\\uFF0CDragMove \\u7EC4\\u4EF6\\u5185\\u90E8\\u5C06\\u4EC5\\u901A\\u8FC7\\u53C2\\u6570\\u8FD4\\u56DE\\u8BA1\\u7B97\\u540E\\u7684\\u4F4D\\u7F6E\\uFF0C\\u4E0D\\u505A\\u8BBE\\u7F6E\\uFF0C\\u7528\\u6237\\u6309\\u9700\\u81EA\\u884C\\u8BBE\\u7F6E\\u65B0\\u4F4D\\u7F6E\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useRef, useEffect } from'react';\\nimport { DragMove } from '@douyinfe/semi-ui';\\n\\nfunction CustomMove() {\\n  const containerRef = React.useRef();\\n  const elementRef = React.useRef();\\n  const startPoint = React.useRef();\\n\\n  const customMove = useCallback((element, top, left) => {\\n    if (left + 100 > containerRef.current.offsetWidth) {\\n      element.style.right = `${containerRef.current.offsetWidth - left - element.offsetWidth}px`\\n      element.style.left = 'auto';\\n    } else {\\n      element.style.left = left + 'px';\\n    } \\n    element.style.top = top + 'px';\\n  }, [])\\n\\n  const onMouseDown = useCallback((e) => {\\n    startPoint.current = {\\n      x: e.clientX,\\n      y: e.clientY,\\n    }\\n  }, []);\\n\\n  const onMouseUp = useCallback((e) => {\\n    if (startPoint.current) {\\n      const { x, y } = startPoint.current;\\n      if (Math.abs(e.clientX - x) < 5 && Math.abs(e.clientY - y) < 5) {\\n        if (elementRef.current.style.width === '60px') {\\n          elementRef.current.style.width = '100px';\\n        } else {\\n          elementRef.current.style.width = '60px';\\n        }\\n      }\\n    }\\n    startPoint.current = null;\\n  }, []);\\n\\n  return (\\n    <>\\n      <span>\\u84DD\\u8272\\u8272\\u5757\\u70B9\\u51FB\\u53EF\\u6539\\u53D8\\u5BBD\\u5EA6\\uFF0C\\u6539\\u53D8\\u524D\\u540E\\u84DD\\u8272\\u8272\\u5757\\u5747\\u4E0D\\u4F1A\\u8D85\\u51FA\\u8303\\u56F4\\u9650\\u5236 </span>\\n      <br /><br />\\n      <div \\n        style={{ \\n          backgroundColor: 'rgba(var(--semi-grey-2), 1)', width: 300, height: 300, \\n          position: 'relative', padding: 10,\\n          color: 'rgba(var(--semi-white), 1)', fontWeight: 500,\\n        }} \\n        ref={containerRef}\\n      >\\n        <span>Constrainer</span>\\n        <DragMove\\n          constrainer={() => containerRef.current}\\n          customMove={customMove}\\n        >\\n          <div\\n            style={{ backgroundColor: 'var(--semi-color-primary)',width: 60, height: 50,\\n              display: 'flex', alignItems: 'center',justifyContent: 'center',\\n              position: 'absolute', top: 50, left: 50, borderRadius: 10, padding: 5\\n            }}\\n            onMouseDown={onMouseDown}\\n            onMouseUp={onMouseUp}\\n            ref={elementRef}\\n          >Drag me</div>\\n        </DragMove>\\n      </div> \\n    </>\\n  )\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"API\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"allowInputDrag\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u539F\\u751F input/textarea \\u65F6\\u662F\\u5426\\u5141\\u8BB8\\u62D6\\u52A8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"allowMove\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB/\\u89E6\\u6478\\u65F6\\u662F\\u5426\\u5141\\u8BB8\\u62D6\\u52A8\\u7684\\u5224\\u65AD\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(event: TouchEvent \", \"|\", \"MouseEvent, element: ReactNode) => boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"constrainer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8FD4\\u56DE\\u9650\\u5236\\u53EF\\u62D6\\u62FD\\u7684\\u8303\\u56F4\\u7684\\u5143\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"customMove\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u62D6\\u52A8\\u540E\\u7684\\u4F4D\\u7F6E\\u5904\\u7406\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(element: ReactNode, top: number, left: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"handler\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8FD4\\u56DE\\u89E6\\u53D1\\u62D6\\u52A8\\u7684\\u5143\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMouseDown\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9F20\\u6807\\u6309\\u4E0B\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMouseMove\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9F20\\u6807\\u79FB\\u52A8\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMouseUp\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9F20\\u6807\\u62AC\\u8D77\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: MouseEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onTouchCancel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u89E6\\u6478\\u53D6\\u6D88\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: TouchEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onTouchEnd\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u89E6\\u6478\\u7ED3\\u675F\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: TouchEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onTouchMove\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u89E6\\u6478\\u79FB\\u52A8\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: TouchEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onTouchStart\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u89E6\\u6478\\u5F00\\u59CB\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: TouchEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/plus/dragMove","next":{"fields":{"slug":"en-US/plus/jsonviewer"},"id":"2b87f621-08ee-5aa8-ab3f-6ba7cdd70d68","frontmatter":{"title":"JsonViewer","localeCode":"en-US","icon":"doc-jsonviewer","showNew":null}},"previous":{"fields":{"slug":"en-US/plus/dragMove"},"id":"cd268d27-a8e1-5d96-9a72-5350252a09e5","frontmatter":{"title":"DragMove","localeCode":"en-US","icon":"doc-dragmove","showNew":null}}}},"staticQueryHashes":["1348983216898582","1477422646898582","3245198693898582","417590761898582","63159454898582"]}