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>