// draggable.js import { onMounted, onBeforeUnmount } from 'vue' export default { mounted(el) { console.log('el',el) el.setAttribute('draggable', true) let startX, startY, initialLeft, initialTop, currentX, currentY const onDragStart = (e) => { console.log('e',e.preventDefault()) e.stopPropagation() // e.preventDefault() startX = e.clientX || e.touches[0].clientX startY = e.clientY || e.touches[0].clientY initialLeft = el.offsetLeft initialTop = el.offsetTop el.classList.add('dragging') } const onDrag = (e) => { e.stopPropagation() currentX = (e.clientX || e.touches[0].clientX) - startX currentY = (e.clientY || e.touches[0].clientY) - startY el.style.left = `${initialLeft + currentX}px` el.style.top = `${initialTop + currentY}px` } const onDragEnd = (e) => { e.stopPropagation() el.classList.remove('dragging') } el.addEventListener('dragstart', onDragStart) el.addEventListener('drag', onDrag) el.addEventListener('dragend', onDragEnd) el.addEventListener('touchstart', onDragStart) el.addEventListener('touchmove', onDrag) el.addEventListener('touchend', onDragEnd) onMounted(() => { el.classList.add('draggable') }) onBeforeUnmount(() => { el.removeEventListener('dragstart', onDragStart) el.removeEventListener('drag', onDrag) el.removeEventListener('dragend', onDragEnd) el.removeEventListener('touchstart', onDragStart) el.removeEventListener('touchmove', onDrag) el.removeEventListener('touchend', onDragEnd) el.classList.remove('draggable') el.classList.remove('dragging') }) } } 为什么拖拽时会出现虚影,残影, 怎么解决这个问题

出现拖拽时的虚影、残影问题，是因为浏览器默认会在拖拽时添加一个半透明的影像，以便用户可以清楚地看到拖拽的对象和目标位置。这个影像在拖拽结束后会自动消失。

您可以尝试在dragstart事件中调用setData方法来阻止浏览器默认的影像行为，例如：

const onDragStart = (e) => {
  e.stopPropagation();
  e.dataTransfer.setData('text/plain', ''); // 阻止浏览器默认影像
  startX = e.clientX || e.touches[0].clientX;
  startY = e.clientY || e.touches[0].clientY;
  initialLeft = el.offsetLeft;
  initialTop = el.offsetTop;
  el.classList.add('dragging');
};

此外，您还可以在CSS中使用`-webkit-user-drag: none;`来阻止元素的默认拖拽效果，例如：

.draggable {
  -webkit-user-drag: none;
  user-select: none;
}

请注意，这种方法可能会影响到元素的交互性，因此需要谨慎使用。

相关问题

// draggable.js import { onMounted, onBeforeUnmount } from 'vue' export default { mounted(el) { el.setAttribute('draggable', true) let startX, startY, initialLeft, initialTop, currentX, currentY const onDragStart = (e) => { e.stopPropagation() startX = e.clientX || e.touches[0].clientX startY = e.clientY || e.touches[0].clientY initialLeft = el.offsetLeft initialTop = el.offsetTop el.classList.add('dragging') } const onDrag = (e) => { e.stopPropagation() currentX = (e.clientX || e.touches[0].clientX) - startX currentY = (e.clientY || e.touches[0].clientY) - startY el.style.left = `${initialLeft + currentX}px` el.style.top = `${initialTop + currentY}px` } const onDragEnd = (e) => { e.stopPropagation() el.classList.remove('dragging') } el.addEventListener('dragstart', onDragStart) el.addEventListener('drag', onDrag) el.addEventListener('dragend', onDragEnd) el.addEventListener('touchstart', onDragStart) el.addEventListener('touchmove', onDrag) el.addEventListener('touchend', onDragEnd) onMounted(() => { el.classList.add('draggable') }) onBeforeUnmount(() => { el.removeEventListener('dragstart', onDragStart) el.removeEventListener('drag', onDrag) el.removeEventListener('dragend', onDragEnd) el.removeEventListener('touchstart', onDragStart) el.removeEventListener('touchmove', onDrag) el.removeEventListener('touchend', onDragEnd) el.classList.remove('draggable') el.classList.remove('dragging') }) } } 解决这个报错 TypeError: Cannot read properties of undefined (reading '0')

在这段代码中，并没有显示的报错信息，所以很难确定你遇到的报错是哪个。但是，根据你提供的代码以及报错信息，我们可以猜测，可能是在这行代码中出现了问题：

startX = e.clientX || e.touches[0].clientX

由于此行代码使用了逻辑或运算符，如果 `e.clientX` 为 undefined，则会尝试读取 `e.touches[0].clientX`，但是 `e.touches` 可能为空，这就会导致报错 `Cannot read properties of undefined (reading '0')`，因为你无法从一个未定义的对象中读取属性。

为了解决这个问题，你可以在使用逻辑或运算符之前，先检查 `e` 对象中的属性是否存在。例如，你可以这样修改代码：

startX = e.clientX || (e.touches && e.touches[0] && e.touches[0].clientX)
startY = e.clientY || (e.touches && e.touches[0] && e.touches[0].clientY)

这样，如果 `e.clientX` 为 undefined，就会尝试读取 `e.touches[0].clientX`，但是在读取之前，会先检查 `e.touches` 是否存在，并且检查 `e.touches[0]` 是否存在，以避免出现上述报错。

翻译文档 https://github.com/mauricius/vue-draggable-resizable#readme

这是一个Vue的可拖拽和可调整大小的组件，允许用户通过拖拽和调整大小来改变元素的位置和尺寸。此组件支持以下功能：

- 可拖拽：将元素从一个位置拖拽到另一个位置。
- 可调整大小：通过调整元素的大小来改变其尺寸。
- 格栅化：通过设置网格大小来对元素进行格栅化。
- 限制移动范围：可以限制元素只能在指定的区域内移动。
- 事件：可以监听元素的拖拽和调整大小事件。

使用此组件非常简单，只需将其作为Vue的组件引入即可。例如：

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

Vue.component('vue-draggable-resizable', VueDraggableResizable)

然后就可以在Vue模板中使用该组件了：

<vue-draggable-resizable
  :x="100"
  :y="100"
  :w="200"
  :h="200"
  :min-width="50"
  :min-height="50"
  :max-width="400"
  :max-height="400"
  :parent="true"
  :grid="[10, 10]"
  :disabled="false"
  :handles="['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']"
  :snap-to-grid="true"
  :active="true"
  @dragging="handleDragging"
  @resizing="handleResizing"
>
  <!-- Your content here -->
</vue-draggable-resizable>

此外，该组件还支持许多其他属性和事件，可以根据需要进行配置。完整的文档可以在上面提供的GitHub链接中找到。