Vue.Draggable
v2.24.3
مكون Vue (Vue.js 2.0) أو التوجيه (Vue.js 1.0) يسمح بالسحب والإفلات والمزامنة مع مصفوفة نموذج العرض.
استنادًا إلى جميع ميزات Sortable.js وتقديمها
راجع vue.draggable.next
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/
tag و componentData تبحث عن الداعمين!
هل تجد هذا المشروع مفيدًا؟ يمكنك أن تشتري لي ☕ أو ؟
yarn add vuedraggable
npm i -S vuedraggableاحذر من أنه قابل للسحب للإصدار 2.0 وليس قابل للسحب للإصدار 1.0
< 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 >راجع قسم المثال
استخدم مكونًا قابلاً للسحب:
< 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 >ملف .vue:
import draggable from 'vuedraggable'
. . .
export default {
components : {
draggable ,
} ,
...transition-group : < draggable v-model =" myArray " >
< transition-group >
< div v-for =" element in myArray " :key =" element.id " >
{{element.name}}
div >
transition-group >
draggable > يجب أن يقوم المكون القابل للسحب بتغليف العناصر القابلة للسحب مباشرة، أو transition-component يحتوي على العناصر القابلة للسحب.
< 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 > < 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 > < draggable v-model =' myList ' > computed: {
myList : {
get ( ) {
return this . $store . state . myList
} ,
set ( value ) {
this . $store . commit ( 'updateList' , value )
}
}
} النوع: Array
المطلوب: false
الافتراضي: null
مجموعة الإدخال إلى مكون قابل للسحب. عادةً ما تكون نفس المصفوفة المشار إليها بواسطة العنصر الداخلي v-for directive.
هذه هي الطريقة المفضلة لاستخدام Vue.draggable لأنه متوافق مع Vuex.
لا ينبغي استخدامه مباشرة ولكن فقط من خلال توجيه v-model :
< draggable v-model =" myArray " > النوع: Array
المطلوب: false
الافتراضي: null
بديل لخاصية value ، list عبارة عن مصفوفة تتم مزامنتها مع السحب والإفلات.
يتمثل الاختلاف الرئيسي في أنه يتم تحديث خاصية list عن طريق مكون قابل للسحب باستخدام طريقة الوصل، في حين أن value غير قابلة للتغيير.
لا تستخدم بالتزامن مع قيمة الدعامة.
الجديد في الإصدار 2.19
يمكن تعيين الخيارات القابلة للفرز مباشرةً كخاصيات vue.draggable منذ الإصدار 2.19.
هذا يعني أن جميع الخيارات القابلة للفرز هي دعائم صالحة قابلة للفرز مع استثناء ملحوظ لجميع الطرق التي تبدأ بـ "on" حيث يعرض المكون القابل للسحب نفس واجهة برمجة التطبيقات عبر الأحداث.
يتم دعم خاصية حالة الكباب: على سبيل المثال، سيتم تحويل دعائم ghost-class إلى خيار قابل للفرز ghostClass .
مثال على مقبض الإعداد والفرز وخيار المجموعة:
< draggable
v-model =" list "
handle =" .handle "
:group =" { name: 'people', pull: 'clone', put: false } "
ghost-class =" ghost "
:sort =" false "
@change =" log "
>
draggable > النوع: String
الافتراضي: 'div'
نوع عقدة HTML للعنصر الذي ينشئه المكون القابل للسحب كعنصر خارجي للفتحة المضمنة.
من الممكن أيضًا تمرير اسم مكون vue كعنصر. في هذه الحالة، سيتم تمرير السمة القابلة للسحب إلى مكون الإنشاء.
راجع أيضًا بيانات المكون إذا كنت بحاجة إلى تعيين دعائم أو حدث للمكون الذي تم إنشاؤه.
النوع: Function
المطلوب: false
الافتراضي: (original) => { return original;}
يتم استدعاء الوظيفة للمكون المصدر لاستنساخ العنصر عندما يكون خيار الاستنساخ صحيحًا. الوسيطة الفريدة هي عنصر viewModel المراد استنساخه والقيمة التي تم إرجاعها هي نسخته المستنسخة.
افتراضيًا، يعيد vue.draggable استخدام عنصر viewModel، لذا يتعين عليك استخدام هذا الخطاف إذا كنت تريد استنساخه أو استنساخه بشكل عميق.
النوع: Function
المطلوب: false
الافتراضي: null
إذا لم تكن فارغة، فسيتم استدعاء هذه الوظيفة بطريقة مشابهة لاستدعاء Sortable onMove. سيؤدي إرجاع خطأ إلى إلغاء عملية السحب.
function onMoveCallback ( evt , originalEvent ) {
...
// return false; — for cancel
}الكائن evt له نفس خاصية الحدث Sortable onMove، بالإضافة إلى 3 خصائص إضافية:
draggedContext : السياق المرتبط بالعنصر المسحوبindex : فهرس العناصر المسحوبةelement : العنصر المسحوب لعنصر نموذج العرض الأساسيfutureIndex : الفهرس المحتمل للعنصر المسحوب في حالة قبول عملية الإفلاتrelatedContext : سياق مرتبط بعملية السحب الحاليةindex : فهرس العنصر المستهدفelement : عنصر نموذج عرض العنصر المستهدفlist : قائمة الأهدافcomponent : الهدف VueComponentHTML:
< draggable :list =" list " :move =" checkMove " >جافا سكريبت:
checkMove: function ( evt ) {
return ( evt . draggedContext . element . name !== 'apple' ) ;
}انظر المثال الكامل: Cancel.html، Cancel.js
النوع: Object
المطلوب: false
الافتراضي: null
يتم استخدام هذه الدعائم لتمرير معلومات إضافية إلى المكون الفرعي المعلن بواسطة دعائم العلامة.
قيمة:
props : الدعائم التي سيتم تمريرها إلى المكون الفرعيattrs : attrs ليتم تمريرها إلى المكون الفرعيon : الأحداث التي سيتم الاشتراك فيها في المكون الفرعيمثال (باستخدام مكتبة عنصر واجهة المستخدم):
< 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
}
} ;
}
}دعم الأحداث القابلة للفرز:
start ، add ، remove ، update ، end ، choose ، unchoose ، sort ، filter ، clone
يتم استدعاء الأحداث عند تشغيل onStart وonAdd وonRemove وonUpdate وonEnd وonChoose وonUnchoose وonSort وonClone بواسطة Sortable.js بنفس الوسيطة.
انظر هنا للرجوع إليها
لاحظ أنه تم تعيين رد الاتصال SortableJS OnMove باستخدام خاصية النقل
HTML:
< draggable :list =" list " @end =" onEnd " >حدث التغيير
يتم تشغيل حدث change عندما لا تكون خاصية القائمة فارغة ويتم تغيير المصفوفة المقابلة بسبب عملية السحب والإفلات.
يتم استدعاء هذا الحدث باستخدام وسيطة واحدة تحتوي على إحدى الخصائص التالية:
added : يحتوي على معلومات عن عنصر مضاف إلى المصفوفةnewIndex : فهرس العنصر المضافelement : العنصر المضافremoved : يحتوي على معلومات عن عنصر تمت إزالته من المصفوفةoldIndex : فهرس العنصر قبل إزالتهelement : العنصر المحذوفmoved : يحتوي على معلومات عن عنصر تم نقله داخل المصفوفةnewIndex : الفهرس الحالي للعنصر المنقولoldIndex : الفهرس القديم للعنصر المنقولelement : العنصر المنقولالقيد: لا تعمل فتحة الرأس أو التذييل جنبًا إلى جنب مع مجموعة النقل.
استخدم فتحة header لإضافة عنصر غير قابل للسحب داخل المكون القابل للسحب. هام: يجب استخدامه مع الخيار القابل للسحب لوضع علامة على العنصر القابل للسحب. لاحظ أنه سيتم دائمًا إضافة فتحة الرأس قبل الفتحة الافتراضية بغض النظر عن موضعها في القالب. السابق:
< 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 > استخدم فتحة 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 >يجب على أطفال Vue.draggable دائمًا تعيين القائمة أو خاصية القيمة باستخدام التوجيه v-for
يجب أن يتم ربط العناصر الفرعية داخل v-for كأي عنصر في Vue.js. كن حذرًا في توفير القيم الأساسية الموحية على وجه الخصوص:
مثال قابل للسحب
انظر هنا
