实现 Vue 可拖动答案

【问题标题】：Implementing Vue draggable实现 Vue 可拖动
【发布时间】：2023-03-02 22:18:01
【问题描述】：

我正在尝试实现 vue 可拖动，它似乎几乎可以工作，除非我尝试在按钮上实现它。每当我尝试移动按钮时，它都会给我一条错误消息。

这是一个例子：https://codepen.io/anon/pen/xoQRMV?editors=1111

          <div id="app">
    <v-app id="inspire">
      <v-container>
        <v-layout justify-center>
     <v-flex>
       <draggable v-model="myArray" :options="options" handle=".handle">    
          <div v-for="element in myArray" :key="element.id" class="title 
        mb-3">{{element.name}}
             <v-icon color="red" class="handle mt-0">drag_handle</v-icon>
           </div>   
          <v-btn class="ml-0">Button</v-btn>
          <v-icon color="red" class="handle">drag_handle</v-icon>
         </draggable>
        </v-flex>
       </v-layout>
   </v-container>
     </v-app>
   </div>


        new Vue({
    el: '#app',
     data() {
     return {
      myArray: [
       {name: 'Text1!!!!', id: 0},
       {name: 'Text2!!!!', id: 1},
         ],
         options: {
        handle: '.handle'
        }
            }
           }
          })

感谢任何帮助。

【问题讨论】：

我在 Chrome 中打开了您的 codepen 示例，但在拖动红色等号按钮时没有看到任何错误消息，您看到什么错误消息？
感觉很老套但是...codepen.io/anon/pen/agQVvm?editors=1111
@Ray 我能够在按钮上实现拖放，这就是为什么没有错误消息但现在我被困在如何替换按钮和文本上。关于如何实现这一目标的任何想法？
@Phll2 我会说那太好了。但是，我在尝试从一个列表替换到另一个列表时遇到问题。请检查我更新的笔。我有一个后续问题，但如果你添加这个，我会接受这个作为答案并用更新的笔打开一个新问题。
@chipit24 明白了。我会做的。我实际上已经用这个问题更新了笔。您可以看到您将无法用文本替换按钮。

标签： javascript vuejs2 vuetify.js vuedraggable

【解决方案1】：

我能够通过创建自己的数组来实现按钮的拖动：-

   <draggable class="list-group"  :list="buttonArray" :options="options" 
       handle=".handle" group="drags">
         <div v-for="item in buttonArray" :key="item.id">
          <v-btn class="ml-0">{{item.name}}</v-btn>
          <v-icon color="red" class="handle">drag_handle</v-icon>
           </div>
         </draggable>

             buttonArray: [
       {name: 'Button1', id: 2},
       {name:'Button2', id:3}
         ],

更新的笔：-https://codepen.io/anon/pen/xoQRMV?editors=1111

但是，它会产生一个问题，即我无法用按钮替换文本。 :(

【讨论】：

【解决方案2】：

我认为它必须从单个数组中工作，例如 https://codepen.io/anon/pen/agQVvm?editors=1111

<div id="app">
  <v-app id="inspire">
     <v-container>
       <v-layout justify-center>
         <v-flex>
           <draggable :list="combinedArray" :options="options" handle=".handle">    
             <div v-for="element in combinedArray" :key="element.id" class="title mb-3">
               <div v-if="element.type !== 'button'" class="title mb-3">
                 {{ element.name }}
                 <v-icon color="red" class="handle mt-0">drag_handle</v-icon>
               </div>

               <div v-else>
                 <v-btn>{{ element.name }}</v-btn>
                 <v-icon color="red" class="handle mt-0">drag_handle</v-icon>
               </div>
             </div>  
           </draggable>
         </v-flex>
       </v-layout>
  </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',

  created () {
    this.combinedArray = [...this.myArray, ...this.buttonsArray]
  },

  data () {
    return {
      myArray: [
        { name: 'Text1!!!!', id: 0 },
        { name: 'Text2!!!!', id: 1 }
      ],
      buttonsArray: [
        { name: 'Button1', id: 2, type: 'button' },
        { name: 'Button2', id: 3, type: 'button' }
      ],
      combinedArray: [],
      options: {
        handle: '.handle'
      }
    }
  }
})

【讨论】：

你绝对杀了它。非常感谢。