Vue 拖动选中：使用 HTML5 Drag and Drop 实现固定区域内容拖拽

在 Vue.js 中，您可以通过使用 HTML5 的 Drag and Drop API 实现固定区域内的拖动选中功能。以下是实现步骤：

1. 设置可拖动元素

在需要拖动的元素上添加 draggable 属性并设置 true，同时添加 dragstart 事件监听器。dragstart 事件监听器用于启动拖动操作并设置传输的数据。

<div draggable='true' @dragstart='dragStartHandler'></div>

methods: {
  dragStartHandler(event) {
    event.dataTransfer.setData('text/plain', ''); // 设置传输的数据
  }
}

2. 设置固定区域

在固定区域上添加 dropzone 属性并设置 copy，同时添加 dragover 和 drop 事件监听器。dragover 事件监听器用于接收拖动的元素，drop 事件监听器用于进行选中操作。

<div dropzone='copy' @dragover='dragOverHandler' @drop='dropHandler'></div>

methods: {
  dragOverHandler(event) {
    event.preventDefault(); // 阻止默认行为
  },
  dropHandler(event) {
    const data = event.dataTransfer.getData('text/plain'); // 获取传输的数据
    const draggedElement = document.querySelector('[draggable=true]:hover');
    // 选中操作...
    event.preventDefault(); // 阻止默认行为
  }
}

3. 阻止默认行为

在 dragover 事件监听器中调用 preventDefault() 方法，以阻止浏览器默认的拖放行为，从而在 drop 事件监听器中进行选中操作。

注意： 以上代码仅为示例，具体实现方式可以根据实际需求进行调整。

Vue 拖动选中：使用 HTML5 Drag and Drop 实现固定区域内容拖拽