vue单行文本拖拽

你可以使用 HTML5 中的 draggable 属性配合拖放事件来实现单行文本的拖拽。具体步骤如下：

1. 给文本元素添加 draggable 属性，例如：

<p draggable="true">单行文本</p>

2. 在 JavaScript 中添加拖放事件处理函数，例如：

function handleDragStart(event) {
  // 设置拖动数据和效果
  event.dataTransfer.setData('text/plain', event.target.textContent);
  event.dataTransfer.dropEffect = 'move';
}

function handleDragOver(event) {
  // 阻止默认的拖放行为
  event.preventDefault();
  // 设置拖放效果
  event.dataTransfer.dropEffect = 'move';
}

function handleDrop(event) {
  // 阻止默认的拖放行为
  event.preventDefault();
  // 获取拖动数据
  const text = event.dataTransfer.getData('text/plain');
  // 在拖放目标位置插入文本
  event.target.insertAdjacentHTML('beforebegin', `<p>${text}</p>`);
}

3. 将拖放事件处理函数绑定到文本元素上，例如：

<p draggable="true" ondragstart="handleDragStart(event)">单行文本</p>

4. 将拖放事件处理函数绑定到拖放目标元素上，例如：

<div ondragover="handleDragOver(event)" ondrop="handleDrop(event)">拖放目标</div>

这样就可以实现单行文本的拖拽了。注意，以上代码仅为示例，具体实现可以根据需求进行修改。