当前位置：首页 > 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.Draggable：

npm install vuedraggable

使用示例：

<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 提升拖动时的视觉效果，例如添加阴影或高亮。

vue实现内容拖动

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

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

注意事项

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

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

标签: 拖动内容

分享给朋友：

js实现拖动

实现拖动的步骤 HTML 结构创建一个可拖动的元素和一个放置区域： <div id="draggable" draggable="true">拖动我</div> <d…

uniapp 内容列表

uniapp 内容列表的实现方法在uniapp中实现内容列表通常需要结合组件和数据绑定。以下是一个常见的方法：模板部分 <template> <view class="c…

vue实现向上拖动

Vue 实现向上拖动功能实现向上拖动功能通常需要结合 Vue 的指令和事件处理，以及原生 JavaScript 的拖拽 API。以下是几种常见的方法：使用 HTML5 拖放 API 通过 HTM…

vue实现内容复制

使用 Clipboard API 实现复制 Vue 中可以通过 Clipboard API 实现内容复制功能。现代浏览器原生支持该 API，无需额外依赖。 methods: { copyToCl…

vue实现拖动宽度

Vue 实现拖动调整宽度在 Vue 中实现拖动调整宽度可以通过监听鼠标事件和使用 CSS 样式来实现。以下是具体实现方法：使用鼠标事件监听创建一个可拖动的分隔条，通过监听 mousedown、…

vue实现可拖动

Vue 实现可拖动功能在 Vue 中实现可拖动功能通常可以通过原生 HTML5 的拖放 API 或第三方库如 vuedraggable 来完成。以下是两种方法的详细说明：使用 HTML5 拖放…

vue实现内容拖动