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ระวังว่ามันเป็น vuedraggable สำหรับ Vue 2.0 และไม่สามารถ vue-draggable ซึ่งสำหรับเวอร์ชัน 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 >ส่วนตัวอย่าง cf
ใช้องค์ประกอบที่ลากได้:
< 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 prop ได้รับการอัพเดตโดยส่วนประกอบที่สามารถลากได้โดยใช้วิธี splice ในขณะที่ value จะไม่เปลี่ยนรูป
ห้ามใช้ร่วมกับเสาคุณค่า
ใหม่ในเวอร์ชัน 2.19
ตัวเลือกที่จัดเรียงได้สามารถตั้งค่าเป็นอุปกรณ์ประกอบฉาก vue.draggable ได้โดยตรงตั้งแต่เวอร์ชัน 2.19
ซึ่งหมายความว่าตัวเลือกที่จัดเรียงได้ทั้งหมดเป็นอุปกรณ์ประกอบฉากที่จัดเรียงได้ที่ถูกต้อง โดยมีข้อยกเว้นที่โดดเด่นของวิธีการทั้งหมดที่เริ่มต้นด้วย "เปิด" เนื่องจากองค์ประกอบที่ลากได้จะแสดง API เดียวกันผ่านเหตุการณ์
รองรับคุณสมบัติ kebab-case: ตัวอย่างเช่น อุปกรณ์ประกอบ 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 เป็นองค์ประกอบได้ ในกรณีนี้ คุณลักษณะที่ลากได้จะถูกส่งผ่านไปยังส่วนประกอบการสร้าง
ดูเพิ่มเติมที่componentDataหากคุณต้องการตั้งค่าอุปกรณ์ประกอบฉากหรือเหตุการณ์ให้กับส่วนประกอบที่สร้างขึ้น
ประเภท: Function
จำเป็น: false
ค่าเริ่มต้น: (original) => { return original;}
ฟังก์ชันที่ถูกเรียกใช้บนคอมโพเนนต์ต้นทางเพื่อโคลนองค์ประกอบเมื่อตัวเลือกการโคลนเป็นจริง อาร์กิวเมนต์ที่ไม่ซ้ำกันคือองค์ประกอบ viewModel ที่จะโคลน และค่าที่ส่งคืนคือเวอร์ชันที่โคลน
ตามค่าเริ่มต้น vue.draggable จะนำองค์ประกอบ viewModel มาใช้ซ้ำ ดังนั้นคุณต้องใช้ hook นี้หากคุณต้องการโคลนหรือโคลนแบบลึก
ประเภท: Function
จำเป็น: false
ค่าเริ่มต้น: null
หากไม่เป็นโมฆะ ฟังก์ชันนี้จะถูกเรียกใช้ในลักษณะเดียวกันกับการโทรกลับ Sortable onMove การคืนค่าเท็จจะยกเลิกการดำเนินการลาก
function onMoveCallback ( evt , originalEvent ) {
...
// return false; — for cancel
}evt object มีคุณสมบัติเหมือนกับเหตุการณ์ 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 : กิจกรรมที่จะสมัครสมาชิกในคอมโพเนนต์ย่อยตัวอย่าง (โดยใช้ไลบรารีองค์ประกอบ 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
}
} ;
}
}การสนับสนุนสำหรับเหตุการณ์ที่เรียงลำดับได้:
start add remove update end choose unchoose sort filter clone
เหตุการณ์จะถูกเรียกเมื่อใดก็ตามที่ onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone เริ่มทำงานโดย Sortable.js ด้วยอาร์กิวเมนต์เดียวกัน
ดูที่นี่สำหรับการอ้างอิง
โปรดทราบว่าการโทรกลับ SortableJS OnMove ถูกแมปกับ move prop
HTML:
< draggable :list =" list " @end =" onEnd " >เปลี่ยนเหตุการณ์
เหตุการณ์ change จะถูกทริกเกอร์เมื่อ list prop ไม่เป็นโมฆะ และอาร์เรย์ที่เกี่ยวข้องมีการเปลี่ยนแปลงเนื่องจากการลากและวาง
เหตุการณ์นี้ถูกเรียกด้วยหนึ่งอาร์กิวเมนต์ที่มีคุณสมบัติอย่างใดอย่างหนึ่งต่อไปนี้:
added : มีข้อมูลขององค์ประกอบที่เพิ่มในอาร์เรย์newIndex : ดัชนีขององค์ประกอบที่เพิ่มelement : องค์ประกอบที่เพิ่มremoved : มีข้อมูลขององค์ประกอบที่ถูกลบออกจากอาร์เรย์oldIndex : ดัชนีขององค์ประกอบก่อนที่จะลบelement : องค์ประกอบที่ถูกลบออกmoved : มีข้อมูลขององค์ประกอบที่ถูกย้ายภายในอาร์เรย์newIndex : ดัชนีปัจจุบันขององค์ประกอบที่ถูกย้ายoldIndex : ดัชนีเก่าขององค์ประกอบที่ถูกย้ายelement : องค์ประกอบที่ถูกย้ายข้อจำกัด: ไม่มีช่องส่วนหัวหรือส่วนท้ายทำงานร่วมกับกลุ่มการเปลี่ยนผ่าน
ใช้ช่อง header เพื่อเพิ่มองค์ประกอบที่ลากไม่ได้ภายในองค์ประกอบ vuedraggable สำคัญ: ควรใช้ร่วมกับตัวเลือกที่ลากได้เพื่อแท็กองค์ประกอบที่ลากได้ โปรดทราบว่าช่องส่วนหัวจะถูกเพิ่มก่อนช่องเริ่มต้นเสมอ โดยไม่คำนึงถึงตำแหน่งในเทมเพลต อดีต:
< 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 เพื่อเพิ่มองค์ประกอบที่ลากไม่ได้ภายในองค์ประกอบ vuedraggable สิ่งสำคัญ: ควรใช้ร่วมกับตัวเลือกที่ลากได้เพื่อแท็กองค์ประกอบที่ลากได้ โปรดทราบว่าช่องส่วนท้ายจะถูกเพิ่มหลังช่องเริ่มต้นเสมอ โดยไม่คำนึงถึงตำแหน่งในเทมเพลต อดีต:
< 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 ควรแมปรายการหรือค่า prop โดยใช้คำสั่ง v-for
องค์ประกอบลูกใน v-for ควรถูกคีย์เป็นองค์ประกอบใดๆ ใน Vue.js โปรดใช้ความระมัดระวังในการระบุค่าคีย์ที่เกี่ยวข้องโดยเฉพาะ:
ตัวอย่างลากได้
ดูที่นี่
