تنزيل draggable vue directive - تنزيل رمز المصدر draggable vue directive

draggable vue directive

بيانات الموقع

Touch support

تنزيل

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 ,
        } ,
  ...

مع معالج

 < 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 كائنًا يحتوي على حقول الفلول:

handle
onPositionChange
onDragEnd
onDragStart
resetInitialPos
initialPosition
stopDragging
boundingRect
boundingElement
boundingRectMargin

مقبض

النوع: HtmlElement | Vue
مطلوب: false

هناك طريقتان لاستخدام التوجيه draggable ، كما هو موضح في العرض التوضيحي أعلاه.

الاستخدام البسيط. فقط لوضع التوجيه على أي مكون VUE أو عنصر HTML ، و ... BOOM! العنصر قابل للسحب.
باستخدام معالج. إذا اخترت استخدام معالج ، فلن يتم سحب المكون نفسه إلا باستخدام المعالج.

onpositionchange

النوع: Function
مطلوب: false

في بعض الأحيان تحتاج إلى معرفة إحداثيات العنصر أثناء جرها.
سيحقق نقل رد الاتصال إلى draggableValue هذا الهدف ؛ أثناء سحب العنصر ، سيتم تنفيذ رد الاتصال بـ 3 params:

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 ) ;
            }
        }
  . . .