draggable vue directive

Direktif-Direktif-Direktif

Vue Directive (Vue.js 2.x) untuk menangani elemen seret & drop.

Instalasi

 npm install draggable-vue-directive --save 

Demo

Anda dapat melihat demo langsung di sini: https://israelzablianov.github.io/draggable-demo

Contoh

Tanpa pawang

 < div v-draggable >
    classic draggable
</ div >

file .vue :

  import { Draggable } from 'draggable-vue-directive'
  ...
  export default {
        directives : {
            Draggable ,
        } ,
  ...

Dengan pawang

 < div v-draggable =" draggableValue " >
    < div :ref =" handleId " >
        < img src =" ../assets/move.svg " alt =" move " >
    </ div >
    drag and drop using handler
</ div >

file .vue :

  import { Draggable } from 'draggable-vue-directive'
  ...
  export default {
        directives : {
            Draggable ,
        } ,
        data ( ) {
            return {
                handleId : "handle-id" ,
                draggableValue : {
                    handle : undefined
                }
            } ;
        } ,
        mounted ( ) {
            this . draggableValue . handle = this . $refs [ this . handleId ] ;
        }
  ...

nilai draggable

Objek yang diteruskan ke Petunjuk disebut Nilai Petunjuk.
Misalnya, di v-draggable="draggableValue" , draggableValue dapat menjadi objek yang berisi bidang yang terus berjalan:

• handle
• onPositionChange
• onDragEnd
• onDragStart
• resetInitialPos
• initialPosition
• stopDragging
• boundingRect
• boundingElement
• boundingRectMargin

menangani

Jenis: HtmlElement | Vue
Diperlukan: false

Ada dua cara untuk menggunakan arahan draggable , seperti yang ditunjukkan pada demo di atas.

1. Penggunaan sederhananya. Hanya untuk menempatkan arahan pada komponen vue atau elemen html apa pun, dan ... boom! Elemennya bisa diseret.
2. Menggunakan pawang. Jika Anda memilih untuk menggunakan pawang, komponen itu sendiri hanya akan dapat diseret menggunakan pawang.

OnpositionChange

Jenis: Function
Diperlukan: false

Terkadang Anda perlu mengetahui koordinat elemen saat diseret.
Melewati panggilan balik ke draggableValue akan mencapai tujuan ini; Saat menyeret elemen, panggilan balik akan dieksekusi dengan 3 param:

• positionDiff
• absolutePosition (posisi saat ini; pertama kali arahan ditambahkan ke DOM atau diinisialisasi, nilainya tidak akan undefined , kecuali elemen memiliki nilai left dan top )
• event (objek acara)

  import { Draggable } from 'draggable-vue-directive'
  ...
  export default {
        directives : {
            Draggable ,
        } ,
        data ( ) {
            return {
                draggableValue : {
                    onPositionChange : this . onPosChanged
                }
            } ;
        } ,
        methods : {
            onPosChanged : function ( positionDiff , absolutePosition , event ) {
                console . log ( "left corner" , absolutePosition . left ) ;
                console . log ( "top corner" , absolutePosition . top ) ;
            }
        }
  . . . 

Ondragend

Jenis: Function
Diperlukan: false

Hanya memancarkan saat menyeret ujung. Memiliki fungsionalitas yang sama dengan onPositionChange .

OndragStart

Jenis: Function
Diperlukan: false

Hanya memancarkan saat menyeret dimulai. Memiliki fungsionalitas yang sama dengan onPositionChange .

resetinitialpos

Jenis: Boolean
Diperlukan: false
Default: undefined

Kembali ke posisi awal elemen, sebelum dipasang.

Posisi awal

Jenis: Position
Diperlukan: false
Default: undefined

Menetapkan posisi awal absolut dari elemen ini.
Akan diterapkan saat resetInitialPos true .

stopdragging

Jenis: Boolean
Diperlukan: false
Default: undefined

Segera berhenti menyeret.

Boundingrect

Jenis: ClientRect
Diperlukan: false
Default: undefined

Membatasi terseret ke dalam batas persegi panjang.

BoundingElement

Jenis: HtmlElement
Diperlukan: false
Default: undefined

Membatasi terseret ke dalam batas elemen.

BoundingRectMargin

Jenis: MarginOptions
Diperlukan: false
Default: undefined

Saat menggunakan boundingRect atau boundingElement , Anda dapat melewati objek dengan sifat top , left , bottom , dan right , untuk menentukan margin antara elemen dan batas.