element-plus的tree拖拽不兼容触屏,添加touch后再move的事件中或者到的treeNode(目标位置)获取是被拖拽元素,有什么好办法吗?-灵析社区

Fronttend

我直接在tree-node.vue的标签上添加了 @touchstart="handleDragStart" @touchmove="handleDragOver" @touchend="handleDragEnd" 在useDragNode.ts中的treeNodeDragStart、treeNodeDragOver、treeNodeDragEnd添加了一些非空判断 //添加部分 if (typeof event.dataTransfer === 'undefined') { event.dataTransfer = {} } //原有部分 event.dataTransfer.effectAllowed = 'move' 目前的效果就是在触摸状态下可以拖拽,但松手后被拖拽的部分会消失 我检查后发现应该是因为handleDragOver事件中获取到的目标props.node是被拖拽的元素,所以修改位置时会没有目标位置导致的消失 const handleDragOver = (event: DragEvent) => { event.preventDefault() if (!tree.props.draggable) return dragEvents.treeNodeDragOver({ event, treeNode: { $el: node$.value, node: props.node }, }) } 想问一下touchmove的事件中应该怎么获取目标位置,或者遇到的类似的情况是怎么解决的?

阅读量:13

点赞量:0

问AI
const handleTouchMove = (event) => { event.preventDefault(); // 获取触摸位置 const touch = event.touches[0]; const x = touch.clientX; const y = touch.clientY; // 用触摸位置获取下面的元素 const targetElement = document.elementFromPoint(x, y); // 确定这个元素是否是树节点的一部分 const targetNode = findTreeNodeForElement(targetElement); if (targetNode) { // 执行拖放逻辑 performDragOverLogic(targetNode); } }; const findTreeNodeForElement = (element) => { // 递归查找或者用其他逻辑确定元素是否为树节点的一部分 // 并返回对应的节点数据或者标识 }; const performDragOverLogic = (targetNode) => { // 根据目标节点的位置信息更新拖放状态 };