Bagaimana untuk melaksanakan susun atur boleh seret dalam Vue?

Dengan pembangunan berterusan teknologi bahagian hadapan Web, semakin ramai pembangun mula menggunakan seni bina SPA (Single Page Application) untuk membina aplikasi. Sebagai salah satu rangka kerja bahagian hadapan web yang paling popular pada masa ini, Vue menyediakan perpustakaan komponen yang kaya dan alatan untuk menjadikannya lebih mudah untuk membina aplikasi SPA. Vue juga menyediakan beberapa penyelesaian mudah apabila ia datang untuk melaksanakan reka letak boleh seret.

1. Gunakan Vue-Grid-Layout

Vue-Grid-Layout ialah sistem susun atur grid responsif berdasarkan Vue. Ia menyediakan satu set komponen yang membolehkan anda melaksanakan susun atur grid boleh seret dan boleh diubah saiz dengan mudah sambil menyokong gerak isyarat menyeret dan mengezum pada peranti mudah alih. Menggunakan Vue-Grid-Layout adalah sangat mudah, anda perlu memperkenalkannya terlebih dahulu dalam projek:

npm install vue-grid-layout -S

Kemudian gunakannya dalam komponen Vue, seperti yang ditunjukkan di bawah:

<template>
  <vue-grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true"
                   :is-resizable="true" :vertical-compact="false" :margin="[10, 10]"
                   :use-css-transforms="true" :auto-size="true">
    <vue-grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w"
                   :h="item.h">
      <div class="grid-item-content">{{ item.i }}</div>
    </vue-grid-item>
  </vue-grid-layout>
</template>
<script>
import { VueGridLayout, VueGridItem } from 'vue-grid-layout';

export default {
  components: { VueGridLayout, VueGridItem },
  data() {
    return {
      layout: [
        { i: 'item1', x: 0, y: 0, w: 1, h: 2 },
        { i: 'item2', x: 1, y: 0, w: 1, h: 2 },
        { i: 'item3', x: 2, y: 0, w: 1, h: 2 },
        { i: 'item4', x: 3, y: 0, w: 1, h: 2 },
      ]
    }
  },
}
</script>

Dalam kod di atas, kami mentakrifkan komponen VueGridLayout dan menambah tatasusunan susun atur Ikat pada sifat susun aturnya, di mana setiap item mewakili item grid, termasuk id (i), koordinat x, y dan lebar (w) dan ketinggian (h)nya. Kami juga boleh menetapkan atribut col-num untuk menentukan bilangan lajur dalam grid, atribut ketinggian baris untuk menetapkan ketinggian setiap baris dan atribut boleh seret dan boleh diubah saiz untuk menentukan sama ada item grid boleh diseret dan boleh diubah saiz masing-masing. Vue-Grid-Layout juga menyediakan pelbagai pilihan penyesuaian yang boleh dikonfigurasikan mengikut keperluan.

2. Gunakan Vue-Draggable

Vue-Draggable ialah satu lagi pemalam Vue yang popular, yang membolehkan anda melaksanakan senarai boleh seret dalam Vue, seperti pengisihan seret dan lepas, seret dan lepas untuk menukar induk, dll. Ia sangat sesuai untuk melaksanakan panel tugas drag-and-drop yang serupa dengan Trello. Menggunakan Vue-Draggable juga sangat mudah Anda juga perlu memperkenalkannya terlebih dahulu:

npm install vuedraggable --save

Kemudian gunakannya dalam komponen Vue, seperti yang ditunjukkan di bawah:

<template>
  <draggable v-model="list" :options="dragOptions">
    <div v-for="(item, index) in list" :key="item.id">
      <h3 class="title">{{ item.title }}</h3>
      <p class="content">{{ item.content }}</p>
    </div>
  </draggable>
</template>
<script>
  import draggable from 'vuedraggable';

  export default {
    components: { draggable },
    data() {
      return {
        list: [
          { id: 1, title: 'Title 1', content: 'Content 1' },
          { id: 2, title: 'Title 2', content: 'Content 2' },
          { id: 3, title: 'Title 3', content: 'Content 3' },
          { id: 4, title: 'Title 4', content: 'Content 4' },
          { id: 5, title: 'Title 5', content: 'Content 5' },
        ],
        dragOptions: {
          group: {
            name: 'task',
            pull: 'clone',
            put: false
          },
          sort: false,
          animation: 150,
        },
      }
    },
  }
</script>

Dalam kod di atas, kami mentakrifkan komponen yang boleh diseret dan mengikat tatasusunan senarai kepada Pada model vnya, setiap item mewakili item senarai, termasuk id, tajuk dan kandungannya. Kami juga boleh menetapkan pelbagai pilihan tersuai melalui atribut pilihan, seperti atribut kumpulan untuk menetapkan kumpulan seret dan lepas, atribut isihan untuk menetapkan sama ada pengisihan didayakan, atribut animasi untuk menetapkan tempoh animasi, dsb.

Ringkasan

Adalah perkara biasa untuk menggunakan Vue untuk melaksanakan reka letak boleh seret dan Tataletak Vue-Grid dan Vue-Draggable adalah dua penyelesaian yang baik. Vue-Grid-Layout sesuai untuk susun atur grid, yang boleh merealisasikan susun atur grid boleh seret dan boleh ubah saiz, dan sesuai untuk membina pelbagai aplikasi interaktif yang kompleks. Vue-Draggable digunakan terutamanya untuk senarai drag-and-drop, dan sangat berkesan dalam melaksanakan panel tugas drag-and-drop seperti Trello. Memilih penyelesaian yang betul bergantung pada kes penggunaan tertentu, kedua-duanya adalah mudah dan fleksibel untuk digunakan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur boleh seret dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!