相关文章推荐
任性的弓箭  ·  while循环·  6 月前    · 
魁梧的机器人  ·  Process.StandardInput ...·  1 年前    · 
<template>
  <div id="app">
    <div class="item" v-for="(item, index) in list" :key="item" draggable="true" @dragstart="dragStart($event, index)">
      {{ item }}
    <div class="delete-icon" id="delete-icon" @drop="deleteButton" @dragover="allowDrop">&#128465;</div>
</template>
<script>
export default {
  data() {
    return {
      list: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
  methods: {
    dragStart(event, index) {
      // 设置拖拽时携带的数据
      event.dataTransfer.setData('index', index);
    allowDrop(event) {
      event.preventDefault();
    deleteButton(event) {
      // 阻止默认的drop行为
      event.preventDefault();
      // 获取拖拽传递的数据
      const index = Number(event.dataTransfer.getData('index'))
      console.log("remove=>", index)
      this.list.splice(index, 1)
</script>
<style>
.del {
  color: red;
  width: 50px;
  height: 20px;
  background-color: aqua;
  margin: 20px;
.item {
  background-color: rgb(246, 143, 8);
  width: 50px;
  height: 30px;
  margin: 20px auto;
  touch-action: manipulation;
  /* 阻止移动端默认的滚动行为 */
.delete-icon {
  margin: 20px;
  font-size: 50px;
  text-align: center;
</style>
				
Vue拖拽到目标区域的实现可以通过使用vue-draggable插件来轻松完成。 首先,我们需要在项目中安装vue-draggable。可以通过npm或yarn来安装: npm安装: npm install vuedraggable --save yarn安装: yarn add vuedraggable 在需要使用拖拽功能的组件中,导入并注册vue-draggable插件: ```javascript import draggable from 'vuedraggable'; export default { components: { draggable } 接下来,我们在模板中使用draggable组件来实现拖拽功能: ```html <draggable v-model="list" :options="{ group: 'people' }"> <div v-for="(item, index) in list" :key="index">{{ item }}</div> </draggable> 上述代码中,我们通过v-model绑定了一个名为list的数组,这将是我们需要拖拽的数据。在draggable组件内部,我们使用v-for来渲染每个列表项,并通过:key绑定唯一的key值。 最后,我们可以为draggable组件添加一些选项来定义拖拽行为。在上述代码中,我们使用了{ group: 'people' }选项来指定了分组,这样可以允许列表项在不同的分组中进行拖拽。 通过上述步骤,我们就可以在Vue中实现拖拽功能了。当在目标区域拖拽列表项时,Vue会自动更新list数组的顺序,从而达到拖拽排序的效果。