Javascript 实现Vue可拖动

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

以下是一个例子：

{{element.name}
拖柄
按钮
拖柄
新Vue({
el:“#应用程序”，
数据（）{
返回{
myArray：[
{name:'Text1！！！！'，id:0}，
{name:'Text2！！！！'，id:1}，
],
选项：{
句柄：'.handle'
}
}
}
})

---

非常感谢您的帮助。

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

   <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}
         ],

{{item.name}
拖柄
按钮射线：[
{name:'Button1'，id:2}，
{name:'Button2'，id:3}
],

更新的pen：

---

但是，它会产生一个问题，我无法用按钮替换文本：（

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

   <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}
         ],

{{item.name}
拖柄
按钮射线：[
{name:'Button1'，id:2}，
{name:'Button2'，id:3}
],

更新的pen：

---

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

我认为它必须从单个数组工作，例如。

{{element.name}
拖柄
{{element.name}
拖柄
新Vue({
el:“#应用程序”，
创建（）{
this.combinedArray=[…this.myArray，…this.buttonsArray]
},
数据（）{
返回{
myArray：[
{name:'Text1！！！！'，id:0}，
{name:'Text2！！！！'，id:1}
],
按钮阵列：[
{name:'Button1'，id:2，type:'button'}，
{name:'Button2'，id:3，type:'button'}
],
组合阵列：[]，
选项：{
句柄：'.handle'
}
}
}
})

我认为它必须从单个阵列工作，例如。

{{element.name}
拖柄
{{element.name}
拖柄
新Vue({
el:“#应用程序”，
创建（）{
this.combinedArray=[…this.myArray，…this.buttonsArray]
},
数据（）{
返回{
myArray：[
{name:'Text1！！！！'，id:0}，
{name:'Text2！！！！'，id:1}
],
按钮阵列：[
{name:'Button1'，id:2，type:'button'}，
{name:'Button2'，id:3，type:'button'}
],
组合阵列：[]，
选项：{
句柄：'.handle'
}
}
}
})

我在Chrome中打开了你的codepen示例，但在按红色等号拖动按钮时没有看到任何错误消息，你看到了什么错误消息？感觉很粗糙，但…@Ray我能够实现拖放按钮，这就是为什么没有错误消息的原因，但现在我被困在如何替换按钮和文本上。你知道如何实现吗？@Phll2我想说，这真是太好了。但是，当我试图从一个列表替换到另一个列表时，我遇到了问题。请检查我的更新笔。我有一个后续问题，但如果你添加此问题，我会接受此问题作为答案，并用更新笔打开一个新问题。@chipit24明白了。我会这样做。我已经用此问题更新了笔。你可以看到，你将无法用文本替换按钮。我在Chrome中打开了你的codepen示例，但在拖动红色等号的按钮时没有看到任何错误消息，你看到了什么错误消息？感觉很粗糙，但…@Ray我能够实现拖放按钮，这就是为什么没有错误消息，但现在我一直在研究如何替换按钮按钮和文本。你知道如何实现吗？@Phll2我想说这非常好。但是我在尝试从一个列表替换到另一个列表时遇到问题。请检查我的更新笔。我有一个后续问题，但如果你添加这个，我会接受这个作为答案，并用更新笔打开一个新问题。@chipit24明白了。我会的它。我实际上已经用这个问题更新了笔。你可以看到你不能用文本替换按钮。你绝对杀了它。非常感谢。你绝对杀了它。非常感谢。

<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'
      }
    }
  }
})