Question

我正在尝试将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>

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

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

1 个答案: