title: How to integrate Vue.Draggable into my components
body: <p>I'm trying to integrate vue.draggable into my project <a href="https://github.com/SortableJS/Vue.Draggable" rel="nofollow noreferrer">https://github.com/SortableJS/Vue.Draggable</a></p>
  
  <p>I'm a little confused as to how to integrate my existing project with Vue.draggable. I want every element that is created in the v-for loop to be draggable. I'm used to using jQuery UI to achieve this, but obviously I want a vue-centric approach.</p>
  
  <p>What is the best way to do this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var height = $(document).height();
  var width = $(document).width();
  $(function() {
    Vue.component('sidebar', {
      data: () =&gt; {
        return {
          people: []
        }
      },
      template: `
                  &lt;div id="sidebar"&gt;
                      &lt;div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id"&gt;
                          {{person.first_name + ' ' + person.last_name}}
                      &lt;/div&gt;
                  &lt;/div&gt;
              `,
      methods: {
        isCheckedIn(person) {
          return person.reg_scan == null ? true : false;
        },
        loadPeople() {
          $.ajax({
            method: 'POST',
            dataType: 'json',
            url: base_url + 'users/getParticipants/' + event_id
          }).done(data =&gt; {
            this.people = data;
          });
        }
      },
      mounted() {
        this.loadPeople();
        setInterval(() =&gt; {
          console.log("Getting People");
          this.loadPeople();
        }, 10000);
      }
    });
  
  
    Vue.component('tables', {
      data: () =&gt; {
        return {
          tables: []
        }
      },
      template: `
                  &lt;div id="tables"&gt;
                      &lt;div class='table' v-for="table in tables" :style="computeOffsets(table)"&gt;
                          {{table.name}}
                      &lt;/div&gt;
                  &lt;/div&gt;
              `,
      methods: {
        loadTables() {
          $.ajax({
            method: 'POST',
            dataType: 'json',
            url: base_url + 'tables/getTables/' + event_id
          }).done(data =&gt; {
            this.tables = data;
          });
        },
        computeOffsets(table) {
          return {
            top: (table.position_x * width) + 'px',
            left: (table.position_y * height) + 'px'
          }
        }
      },
      mounted() {
        this.loadTables();
        setInterval(() =&gt; {
          console.log("Getting Tables");
          this.loadTables();
        }, 10000);
      }
    });
  
    var app = new Vue({
      el: '#main'
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table {
    position: absolute;
  }
  
  #sidebar {
    width: 10%;
    float: left;
    height: 500px;
    overflow-y: scroll;
  }
  
  .checked-in {
    background-color: lightgreen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"&gt;&lt;/script&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.min.js"&gt;&lt;/script&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.14.1/vuedraggable.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;div id="main"&gt;
    &lt;sidebar&gt;&lt;/sidebar&gt;
    &lt;tables&gt;&lt;/tables&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>