如何将 Vue.Draggable 集成到我的组件中答案

【问题标题】：How to integrate Vue.Draggable into my components如何将 Vue.Draggable 集成到我的组件中
【发布时间】：2017-08-15 02:08:49
【问题描述】：

我正在尝试将 vue.draggable 集成到我的项目中 https://github.com/SortableJS/Vue.Draggable

我对如何将我现有的项目与 Vue.draggable 集成有点困惑。我希望在 v-for 循环中创建的每个元素都是可拖动的。我习惯使用 jQuery UI 来实现这一点，但显然我想要一种以 vue 为中心的方法。

最好的方法是什么？

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>

【问题讨论】：

看看 vue-dragula :) 这对我来说是一个爆炸。

标签： vue.js vuejs2

【解决方案1】：

变化：

<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>

收件人：

<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 >

【讨论】：