Vue.Draggable

Vue.Dapat Diseret

Komponen Vue (Vue.js 2.0) atau arahan (Vue.js 1.0) memungkinkan drag-and-drop dan sinkronisasi dengan array model tampilan.

Berdasarkan dan menawarkan semua fitur Sortable.js

Untuk Vue 3

Lihat vue.draggable.next

Demo

Demo Langsung

https://sortablejs.github.io/Vue.Draggable/

https://david-desmaisons.github.io/draggable-example/

Fitur

• Dukungan penuh fitur Sortable.js:
  • Mendukung perangkat sentuh
  • Mendukung pegangan seret dan teks yang dapat dipilih
  • Pengguliran otomatis yang cerdas
  • Mendukung drag and drop di antara daftar yang berbeda
  • Tidak ada ketergantungan jQuery
• Tetap menyinkronkan HTML dan melihat daftar model
• Kompatibel dengan grup transisi Vue.js 2.0
• Dukungan pembatalan
• Peristiwa yang melaporkan perubahan apa pun saat kontrol penuh diperlukan
• Gunakan kembali komponen perpustakaan UI yang ada (seperti vuetify, elemen, atau materi vue, dll...) dan buat komponen tersebut dapat diseret menggunakan tag dan props componentData

Pendukung

Mencari pendukung!

Menyumbangkan

Apakah proyek ini bermanfaat? Anda dapat membelikan saya ☕ atau ?

Instalasi

Dengan npm atau benang

yarn add vuedraggable

npm i -S vuedraggable

Berhati-hatilah karena ini vuedraggable untuk Vue 2.0 dan bukan vue-draggable untuk versi 1.0

dengan tautan langsung

 < script src =" //cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js " >  script >

< script src =" //cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js " >  script >

< script src =" //cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js " >  script >

lih bagian contoh

Untuk Vue.js 2.0

Gunakan komponen yang dapat diseret:

Penggunaan umum:

 < draggable v-model =" myArray " group =" people " @start =" drag=true " @end =" drag=false " >
   < div v-for =" element in myArray " :key =" element.id " > {{element.name}}  div >
 draggable >

berkas .vue:

  import draggable from 'vuedraggable'
  . . .
  export default {
        components : {
            draggable ,
        } ,
  ...

Dengan transition-group :

 < draggable v-model =" myArray " >
    < transition-group >
        < div v-for =" element in myArray " :key =" element.id " >
            {{element.name}}
         div >
     transition-group >
 draggable >

Komponen yang dapat diseret harus langsung membungkus elemen yang dapat diseret, atau transition-component yang berisi elemen yang dapat diseret.

Dengan slot footer:

 < draggable v-model =" myArray " draggable =" .item " >
    < div v-for =" element in myArray " :key =" element.id " class =" item " >
        {{element.name}}
     div >
    < button slot =" footer " @click =" addPeople " > Add  button >
 draggable >

Dengan slot tajuk:

 < draggable v-model =" myArray " draggable =" .item " >
    < div v-for =" element in myArray " :key =" element.id " class =" item " >
        {{element.name}}
     div >
    < button slot =" header " @click =" addPeople " > Add  button >
 draggable >

Dengan Vuex:

 < draggable v-model =' myList ' > 

computed: {
    myList : {
        get ( ) {
            return this . $store . state . myList
        } ,
        set ( value ) {
            this . $store . commit ( 'updateList' , value )
        }
    }
}

Alat peraga

nilai

Jenis: Array
Diperlukan: false
Bawaan: null

Masukkan array ke komponen yang dapat diseret. Biasanya array yang sama seperti yang direferensikan oleh direktif v-for elemen dalam.
Ini adalah cara yang lebih disukai untuk menggunakan Vue.draggable karena kompatibel dengan Vuex.
Ini tidak boleh digunakan secara langsung tetapi hanya melalui arahan v-model :

 < draggable v-model =" myArray " > 

daftar

Jenis: Array
Diperlukan: false
Bawaan: null

Alternatif untuk prop value , daftar adalah array yang akan disinkronkan dengan drag-and-drop.
Perbedaan utamanya adalah list prop diperbarui oleh komponen yang dapat diseret menggunakan metode splice, sedangkan value tidak dapat diubah.
Jangan gunakan bersamaan dengan prop nilai.

Semua opsi dapat diurutkan

Baru di versi 2.19

Opsi yang dapat diurutkan dapat diatur secara langsung sebagai props vue.draggable sejak versi 2.19.

Ini berarti bahwa semua opsi sortable adalah props sortable yang valid dengan pengecualian semua metode yang dimulai dengan "on" karena komponen yang dapat diseret mengekspos API yang sama melalui peristiwa.

properti kebab-case didukung: misalnya props ghost-class akan dikonversi ke opsi sortir ghostClass .

Contoh pengaturan pegangan, pengurutan, dan opsi grup:

 < draggable
        v-model =" list "
        handle =" .handle "
        :group =" { name: 'people', pull: 'clone', put: false } "
        ghost-class =" ghost "
        :sort =" false "
        @change =" log "
      >
      
 draggable > 

menandai

Jenis: String
Bawaan: 'div'

Jenis node HTML dari elemen yang dibuat oleh komponen yang dapat diseret sebagai elemen luar untuk slot yang disertakan.
Dimungkinkan juga untuk meneruskan nama komponen vue sebagai elemen. Dalam hal ini, atribut draggable akan diteruskan ke komponen create.
Lihat juga ComponentData jika Anda perlu menyetel props atau event ke komponen yang dibuat.

klon

Jenis: Function
Diperlukan: false
Bawaan: (original) => { return original;}

Fungsi memanggil komponen sumber untuk mengkloning elemen ketika opsi kloning benar. Argumen uniknya adalah elemen viewModel yang akan dikloning dan nilai yang dikembalikan adalah versi kloningnya.
Secara default, vue.draggable menggunakan kembali elemen viewModel, jadi Anda harus menggunakan hook ini jika ingin mengkloning atau mengkloningnya secara mendalam.

bergerak

Jenis: Function
Diperlukan: false
Bawaan: null

Jika bukan null, fungsi ini akan dipanggil dengan cara yang sama seperti panggilan balik Sortable onMove. Mengembalikan false akan membatalkan operasi drag.

 function onMoveCallback ( evt , originalEvent ) {
   ...
    // return false; — for cancel
}

Objek evt memiliki properti yang sama dengan acara Sortable onMove, dan 3 properti tambahan:

• draggedContext : konteks yang ditautkan ke elemen yang diseret
  • index : indeks elemen yang diseret
  • element : elemen yang diseret yang mendasari elemen model tampilan
  • futureIndex : indeks potensial elemen yang diseret jika operasi pelepasan diterima
• relatedContext : konteks yang ditautkan ke operasi drag saat ini
  • index : indeks elemen target
  • element : elemen target melihat elemen model
  • list : daftar sasaran
  • component : target VueComponent

HTML:

 < draggable :list =" list " :move =" checkMove " >

javascript:

checkMove: function ( evt ) {
    return ( evt . draggedContext . element . name !== 'apple' ) ;
}

Lihat contoh lengkap: Cancel.html, cancel.js

komponenData

Jenis: Object
Diperlukan: false
Bawaan: null

Props ini digunakan untuk meneruskan informasi tambahan ke komponen anak yang dideklarasikan oleh tag props.
Nilai:

• props : props untuk diteruskan ke komponen anak
• attrs : attrs untuk diteruskan ke komponen anak
• on : acara yang akan dilanggani di komponen anak

Contoh (menggunakan elemen perpustakaan UI):

 < draggable tag =" el-collapse " :list =" list " :component-data =" getComponentData() " >
    < el-collapse-item v-for =" e in list " :title =" e.title " :name =" e.name " :key =" e.name " >
        < div > {{e.description}}  div >
      el-collapse-item >
 draggable > 

methods: {
    handleChange ( ) {
      console . log ( 'changed' ) ;
    } ,
    inputChanged ( value ) {
      this . activeNames = value ;
    } ,
    getComponentData ( ) {
      return {
        on : {
          change : this . handleChange ,
          input : this . inputChanged
        } ,
        attrs : {
          wrap : true
        } ,
        props : {
          value : this . activeNames
        }
      } ;
    }
  }

Acara

• Dukungan untuk acara yang Dapat Diurutkan:

  start , add , remove , update , end , choose , unchoose , sort , filter , clone
  Peristiwa dipanggil setiap kali onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone diaktifkan oleh Sortable.js dengan argumen yang sama.
  Lihat di sini untuk referensi

  Perhatikan bahwa panggilan balik SortableJS OnMove dipetakan dengan prop move

HTML:

 < draggable :list =" list " @end =" onEnd " >

• mengubah acara

  acara change dipicu ketika prop daftar bukan nol dan larik terkait diubah karena operasi drag-and-drop.
  Peristiwa ini dipanggil dengan satu argumen yang berisi salah satu properti berikut:

  • added : berisi informasi elemen yang ditambahkan ke array
    • newIndex : indeks elemen yang ditambahkan
    • element : elemen yang ditambahkan
  • removed : berisi informasi elemen yang dihapus dari array
    • oldIndex : indeks elemen sebelum dihapus
    • element : elemen yang dihapus
  • moved : berisi informasi elemen yang dipindahkan dalam array
    • newIndex : indeks elemen yang dipindahkan saat ini
    • oldIndex : indeks lama dari elemen yang dipindahkan
    • element : elemen yang dipindahkan

slot

Batasan: slot header atau footer tidak berfungsi bersama dengan grup transisi.

Tajuk

Gunakan slot header untuk menambahkan elemen yang tidak dapat diseret ke dalam komponen vuedraggable. Penting: ini harus digunakan bersama dengan opsi yang dapat diseret untuk menandai elemen yang dapat diseret. Perhatikan bahwa slot header akan selalu ditambahkan sebelum slot default terlepas posisinya di template. Mantan:

 < draggable v-model =" myArray " draggable =" .item " >
    < div v-for =" element in myArray " :key =" element.id " class =" item " >
        {{element.name}}
     div >
    < button slot =" header " @click =" addPeople " > Add  button >
 draggable > 

catatan kaki

Gunakan slot footer untuk menambahkan elemen yang tidak dapat diseret ke dalam komponen vuedraggable. Penting: ini harus digunakan bersama dengan opsi yang dapat diseret untuk menandai elemen yang dapat diseret. Perhatikan bahwa slot footer akan selalu ditambahkan setelah slot default, apa pun posisinya di templat. Mantan:

 < draggable v-model =" myArray " draggable =" .item " >
    < div v-for =" element in myArray " :key =" element.id " class =" item " >
        {{element.name}}
     div >
    < button slot =" footer " @click =" addPeople " > Add  button >
 draggable >

mengerti

• Turunan Vue.draggable harus selalu memetakan daftar atau prop nilai menggunakan direktif v-for

  • Anda dapat menggunakan slot header dan footer untuk melewati batasan ini.

• Elemen turunan di dalam v-for harus dikunci seperti elemen apa pun di Vue.js. Berhati-hatilah dalam memberikan nilai-nilai kunci yang relevan khususnya:

  • biasanya menyediakan indeks array karena kunci tidak akan berfungsi karena kunci harus ditautkan ke konten item
  • elemen yang dikloning harus menyediakan kunci yang diperbarui, hal ini dapat dilakukan dengan menggunakan props clone misalnya

Contoh

• Klon
• Menangani
• Transisi
• Bersarang
• Meja

Contoh demo lengkap

contoh yang dapat diseret

Untuk Vue.js 1.0

Lihat di sini