Implementing Vue draggable

Question

i am trying to implement vue draggable and it almost seems to work except for when i try to implement it on a button. It gives me an error message whenever i try to move the button.

Here is an example : 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'
        }
            }
           }
          })

Any help is appreciated.

I opened your codepen sample in Chrome but didn't see any error message when dragging buttons by the red equal sign, what error message do you see? — Ray
– Ray, Commented Jul 8, 2019 at 20:58
@Ray I was able to implement drag and drop on button that's why no error messages but now i was stuck on how can replace the buttons and texts. Any idea on how to achieve that? — Somethingwhatever
– Somethingwhatever, Commented Jul 8, 2019 at 21:26
@Phll2 That was pretty damn good i would say. However i am having issue when trying to replace from one list to another. Check my updated pen please. I have a follow up question but if you add this, i'll accept this as an answer and open a new question with updated pen. — Somethingwhatever
– Somethingwhatever, Commented Jul 8, 2019 at 21:30
@chipit24 Gotcha. I'll do it. And i've actually updated the pen with the issue. You can see you won't be able to replace buttons with text. — Somethingwhatever
– Somethingwhatever, Commented Jul 8, 2019 at 21:33

Phll2 · Accepted Answer · 2019-07-08 22:34:38Z

2

It would have to work from a single array I think, e.g. 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'
      }
    }
  }
})

edited Jul 8, 2019 at 22:34

answered Jul 8, 2019 at 22:23

Phll2

1852 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Somethingwhatever Over a year ago

You absolutely killed it. Thank you so much.

Somethingwhatever · Accepted Answer · 2019-07-08 21:40:01Z

0

I was able to implement the drag on buttons by creating their own array:-

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

The updated pen:- https://codepen.io/anon/pen/xoQRMV?editors=1111

However it creates an issue where i am not able to replace the text with the button. :(

answered Jul 8, 2019 at 21:40

Somethingwhatever

1,3886 gold badges39 silver badges85 bronze badges

Collectives™ on Stack Overflow

Implementing Vue draggable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related