draggable vue directive

มีการแยกแยะ

Vue Directive (vue.js 2.x) สำหรับการจัดการองค์ประกอบการลากและวาง

การติดตั้ง

 npm install draggable-vue-directive --save 

การสาธิต

คุณสามารถดูตัวอย่างสดได้ที่นี่: https://israelzablianov.github.io/draggable-demo

ตัวอย่าง

ไม่มีตัวจัดการ

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

ไฟล์ .vue :

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

กับ Handler

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

ไฟล์ .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 ] ;
        }
  ...

draggable

วัตถุที่ส่งผ่านไปยังคำสั่งเรียกว่าค่าของคำสั่ง
ตัวอย่างเช่นใน v-draggable="draggableValue" draggableValue สามารถเป็นวัตถุที่มีฟิลด์ folowing:

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

รับมือ

ประเภท: HtmlElement | Vue
จำเป็น: false

มีสองวิธีในการใช้คำสั่ง draggable ดังที่แสดงในการสาธิตด้านบน

1. การใช้งานง่าย ๆ เพียงแค่วางคำสั่งบนองค์ประกอบ Vue หรือองค์ประกอบ HTML และ…บูม! องค์ประกอบนั้นมีอยู่ได้
2. ใช้ตัวจัดการ หากคุณเลือกที่จะใช้ตัวจัดการส่วนประกอบของตัวเองจะสามารถลากได้โดยใช้ตัวจัดการเท่านั้น

onpositionchange

ประเภท: Function
จำเป็น: false

บางครั้งคุณจำเป็นต้องรู้พิกัดขององค์ประกอบในขณะที่กำลังถูกลาก
การผ่านการโทรกลับไปยัง draggableValue จะบรรลุเป้าหมายนี้ ในขณะที่ลากองค์ประกอบการโทรกลับจะถูกดำเนินการด้วย 3 พารามิเตอร์:

• positionDiff
• absolutePosition (ตำแหน่งปัจจุบัน; ครั้งแรกที่มีการเพิ่มคำสั่งลงใน DOM หรือเริ่มต้นค่าจะ undefined เว้นแต่ว่าองค์ประกอบจะมีค่า left และ top )
• event (วัตถุเหตุการณ์)

  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

ประเภท: Function
จำเป็น: false

ปล่อยออกมาเฉพาะเมื่อการลากสิ้นสุด มีฟังก์ชั่นเช่นเดียวกับ onPositionChange

onDragStart

ประเภท: Function
จำเป็น: false

ปล่อยออกมาเฉพาะเมื่อการลากเริ่มต้น มีฟังก์ชั่นเช่นเดียวกับ onPositionChange

รีเซ็ต

ประเภท: Boolean
จำเป็น: false
ค่าเริ่มต้น: undefined

กลับไปที่ตำแหน่งเริ่มต้นขององค์ประกอบก่อนที่จะติดตั้ง

การเริ่มต้น

ประเภท: Position
จำเป็น: false
ค่าเริ่มต้น: undefined

ตั้งค่าตำแหน่งเริ่มต้นสัมบูรณ์ขององค์ประกอบนี้
จะถูกนำไปใช้เมื่อ resetInitialPos เป็น true

การหยุดยั้ง

ประเภท: Boolean
จำเป็น: false
ค่าเริ่มต้น: undefined

หยุดลากทันที

มีขอบเขต

ประเภท: ClientRect
จำเป็น: false
ค่าเริ่มต้น: undefined

จำกัด การลากไปภายในขอบเขตของสี่เหลี่ยมผืนผ้า

การกำหนดขอบเขต

ประเภท: HtmlElement
จำเป็น: false
ค่าเริ่มต้น: undefined

จำกัด การลากไปที่ภายในขอบเขตขององค์ประกอบ

การตัดต่อ

ประเภท: MarginOptions
จำเป็น: false
ค่าเริ่มต้น: undefined

เมื่อใช้ boundingRect หรือ boundingElement คุณสามารถผ่านวัตถุที่มีคุณสมบัติ top left bottom และ right เพื่อกำหนดระยะขอบระหว่างองค์ประกอบและขอบเขต