CODEWITHSUNDEEP
vue.jsvuejs2
user7531085
user7531085

Reputation:

How to integrate Vue.Draggable into my components

I'm trying to integrate vue.draggable into my project https://github.com/SortableJS/Vue.Draggable

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.

What is the best way to do this?

var height = $(document).height();
var width = $(document).width();
$(function() {
  Vue.component('sidebar', {
    data: () => {
      return {
        people: []
      }
    },
    template: `
                <div id="sidebar">
                    <div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id">
                        {{person.first_name + ' ' + person.last_name}}
                    </div>
                </div>
            `,
    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 => {
          this.people = data;
        });
      }
    },
    mounted() {
      this.loadPeople();
      setInterval(() => {
        console.log("Getting People");
        this.loadPeople();
      }, 10000);
    }
  });


  Vue.component('tables', {
    data: () => {
      return {
        tables: []
      }
    },
    template: `
                <div id="tables">
                    <div class='table' v-for="table in tables" :style="computeOffsets(table)">
                        {{table.name}}
                    </div>
                </div>
            `,
    methods: {
      loadTables() {
        $.ajax({
          method: 'POST',
          dataType: 'json',
          url: base_url + 'tables/getTables/' + event_id
        }).done(data => {
          this.tables = data;
        });
      },
      computeOffsets(table) {
        return {
          top: (table.position_x * width) + 'px',
          left: (table.position_y * height) + 'px'
        }
      }
    },
    mounted() {
      this.loadTables();
      setInterval(() => {
        console.log("Getting Tables");
        this.loadTables();
      }, 10000);
    }
  });

  var app = new Vue({
    el: '#main'
  });

});
.table {
  position: absolute;
}

#sidebar {
  width: 10%;
  float: left;
  height: 500px;
  overflow-y: scroll;
}

.checked-in {
  background-color: lightgreen;
}
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.14.1/vuedraggable.min.js"></script>
</head>
<div id="main">
  <sidebar></sidebar>
  <tables></tables>
</div>

Upvotes: 0

Views: 1056

Answers (1)

David Desmaisons
David Desmaisons

Reputation: 1006

Change:

<div id="sidebar">
  <div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id">
    {{person.first_name + ' ' + person.last_name}}
   </div>
</div>

To:

<draggable :list="people">
  <div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :key="person.id">
    {{person.first_name + ' ' + person.last_name}}
   </div>
</draggable >

Upvotes: 1

Related Questions