当前位置：首页 > VUE

vue实现内容拖动

2026-03-08 14:07:31VUE

Vue 实现内容拖动的方法

使用原生 HTML5 Drag and Drop API

HTML5 提供了原生的拖放 API，可以通过 draggable 属性和事件监听实现拖动功能。

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index"
      draggable="true"
      @dragstart="handleDragStart($event, index)"
      @dragover.prevent
      @drop="handleDrop($event, index)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      draggedIndex: null
    };
  },
  methods: {
    handleDragStart(event, index) {
      this.draggedIndex = index;
      event.dataTransfer.setData('text/plain', index);
    },
    handleDrop(event, index) {
      const draggedIndex = this.draggedIndex;
      const temp = this.items[draggedIndex];
      this.$set(this.items, draggedIndex, this.items[index]);
      this.$set(this.items, index, temp);
    }
  }
};
</script>

使用第三方库 Vue.Draggable

Vue.Draggable 是一个基于 Sortable.js 的 Vue 组件，提供了更简单的方式实现拖动排序。

vue实现内容拖动

安装 Vue.Draggable：

npm install vuedraggable

使用示例：

vue实现内容拖动

<template>
  <draggable v-model="items" @end="onDragEnd">
    <div v-for="(item, index) in items" :key="index">
      {{ item }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  methods: {
    onDragEnd() {
      console.log('拖动结束', this.items);
    }
  }
};
</script>

使用自定义指令实现拖动

可以通过 Vue 的自定义指令实现更灵活的拖动功能。

<template>
  <div v-draggable v-for="(item, index) in items" :key="index">
    {{ item }}
  </div>
</template>

<script>
export default {
  directives: {
    draggable: {
      inserted(el) {
        el.setAttribute('draggable', 'true');
        el.addEventListener('dragstart', (e) => {
          e.dataTransfer.setData('text/plain', el.textContent);
        });
      }
    }
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

使用 CSS 增强拖动体验

可以通过 CSS 提升拖动时的视觉效果，例如添加阴影或高亮。

[draggable="true"] {
  cursor: move;
  user-select: none;
}

[draggable="true"]:active {
  opacity: 0.5;
}

注意事项

在移动端可能需要额外的触摸事件处理。
拖动时可能需要禁用某些默认行为（如文本选中）。
对于复杂场景，建议使用成熟的库（如 Vue.Draggable）以减少开发复杂度。

以上方法可以根据具体需求选择使用，原生 API 适合简单场景，而第三方库更适合复杂交互。

标签: 拖动内容

分享给朋友：

vue实现拖动文件移动

Vue 实现文件拖动移动实现文件拖动移动功能通常涉及 HTML5 的拖放 API 和 Vue 的事件处理。以下是具体实现方法：基础拖放实现在 Vue 组件中设置拖放区域并处理相关事件： &l…

vue实现点击切换内容

使用v-if/v-else指令实现切换通过Vue的v-if和v-else指令可以轻松实现内容切换。定义一个布尔变量控制显示状态，点击事件切换该变量值。 <template> <…

vue实现边框高度拖动

实现边框高度拖动的核心思路通过监听鼠标事件（mousedown、mousemove、mouseup）来实现拖动效果。在Vue中结合自定义指令或组件封装更为优雅。基础实现方案（基于自定义指令） &…

vue实现点击复制内容

使用 document.execCommand 方法在 Vue 中创建一个方法，利用 document.execCommand('copy') 实现复制功能。需要创建一个临时的 textarea 或…

react如何获取节点内容

获取节点内容的常用方法使用 ref 获取 DOM 节点在 React 中，可以通过 useRef 或 createRef 创建 ref 对象，并将其附加到目标元素上。通过 ref 的 curren…

react如何在div追加内容

使用 innerHTML 追加内容直接操作 DOM 元素的 innerHTML 属性可以快速追加内容，但需要注意潜在的安全风险（如 XSS 攻击）。 const divRef = useRef…

vue实现内容拖动