Vue.Draggable
v2.24.3
Vue-Komponente (Vue.js 2.0) oder Direktive (Vue.js 1.0), die Drag-and-Drop und Synchronisierung mit dem Ansichtsmodell-Array ermöglicht.
Basiert auf Sortable.js und bietet alle Funktionen von Sortable.js
Siehe vue.draggable.next
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/
tag und componentData Requisiten ziehbar Auf der Suche nach Unterstützern!
Finden Sie dieses Projekt nützlich? Du kannst mir ein ☕ oder ein ? kaufen.
yarn add vuedraggable
npm i -S vuedraggableBeachten Sie, dass es für Vue 2.0 vue-ziehbar ist und nicht für Version 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 >siehe Beispielabschnitt
Ziehbare Komponente verwenden:
< 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-Datei:
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 > Die ziehbare Komponente sollte die ziehbaren Elemente direkt umschließen oder eine transition-component die die ziehbaren Elemente enthält.
< 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 )
}
}
} Typ: Array
Erforderlich: false
Standard: null
Eingabearray zur ziehbaren Komponente. Normalerweise dasselbe Array, auf das durch die v-for-Direktive des inneren Elements verwiesen wird.
Dies ist die bevorzugte Art, Vue.draggable zu verwenden, da es mit Vuex kompatibel ist.
Es sollte nicht direkt verwendet werden, sondern nur über die v-model -Direktive:
< draggable v-model =" myArray " > Typ: Array
Erforderlich: false
Standard: null
Alternativ zum value ist list ein Array, das per Drag-and-Drop synchronisiert werden kann.
Der Hauptunterschied besteht darin, dass list durch ziehbare Komponenten mithilfe der Spleißmethode aktualisiert wird, während value unveränderlich ist.
Nicht in Verbindung mit Wertprop verwenden.
Neu in Version 2.19
Sortierbare Optionen können seit Version 2.19 direkt als vue.draggable props festgelegt werden.
Dies bedeutet, dass alle sortierbaren Optionen gültige sortierbare Requisiten sind, mit der bemerkenswerten Ausnahme aller Methoden, die mit „on“ beginnen, da ziehbare Komponenten dieselbe API über Ereignisse bereitstellen.
Kebab-Case-Eigenschaften werden unterstützt: Beispielsweise werden ghost-class Requisiten in die sortierbare ghostClass Option konvertiert.
Beispiel für ein Einstellungshandle, sortierbar und eine Gruppenoption:
< draggable
v-model =" list "
handle =" .handle "
:group =" { name: 'people', pull: 'clone', put: false } "
ghost-class =" ghost "
:sort =" false "
@change =" log "
>
draggable > Typ: String
Standard: 'div'
HTML-Knotentyp des Elements, das die ziehbare Komponente als äußeres Element für den enthaltenen Slot erstellt.
Es ist auch möglich, den Namen der Vue-Komponente als Element zu übergeben. In diesem Fall wird das ziehbare Attribut an die Erstellungskomponente übergeben.
Siehe auch „componentData“, wenn Sie Requisiten oder Ereignisse für die erstellte Komponente festlegen müssen.
Typ: Function
Erforderlich: false
Standard: (original) => { return original;}
Funktion, die von der Quellkomponente aufgerufen wird, um das Element zu klonen, wenn die Klonoption wahr ist. Das eindeutige Argument ist das zu klonende viewModel-Element und der zurückgegebene Wert ist seine geklonte Version.
Standardmäßig verwendet vue.draggable das viewModel-Element wieder, daher müssen Sie diesen Hook verwenden, wenn Sie es klonen oder tief klonen möchten.
Typ: Function
Erforderlich: false
Standard: null
Wenn nicht null, wird diese Funktion auf ähnliche Weise wie der Sortable onMove-Rückruf aufgerufen. Durch die Rückgabe von „false“ wird der Ziehvorgang abgebrochen.
function onMoveCallback ( evt , originalEvent ) {
...
// return false; — for cancel
}Das evt-Objekt hat dieselbe Eigenschaft wie das Sortable onMove-Ereignis und drei zusätzliche Eigenschaften:
draggedContext : Kontext, der mit dem gezogenen Element verknüpft istindex : Index des gezogenen Elementselement : gezogenes Element, das dem Ansichtsmodellelement zugrunde liegtfutureIndex : Möglicher Index des gezogenen Elements, wenn der Drop-Vorgang akzeptiert wirdrelatedContext : Kontext, der mit dem aktuellen Ziehvorgang verknüpft istindex : Zielelementindexelement : Modellelement der Zielelementansichtlist : Ziellistecomponent : Ziel VueComponentHTML:
< draggable :list =" list " :move =" checkMove " >Javascript:
checkMove: function ( evt ) {
return ( evt . draggedContext . element . name !== 'apple' ) ;
}Siehe vollständiges Beispiel: Cancel.html, cancel.js
Typ: Object
Erforderlich: false
Standard: null
Diese Requisiten werden verwendet, um zusätzliche Informationen an die durch Tag-Requisiten deklarierte untergeordnete Komponente zu übergeben.
Wert:
props : Requisiten, die an die untergeordnete Komponente übergeben werden sollenattrs : Attribute, die an die untergeordnete Komponente übergeben werden sollenon : Ereignisse, die in der untergeordneten Komponente abonniert werden sollenBeispiel (unter Verwendung der Element-UI-Bibliothek):
< 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
}
} ;
}
}Unterstützung für sortierbare Ereignisse:
start , add , remove , update , end , choose , Auswahl unchoose , sort , filter , clone
Ereignisse werden immer dann aufgerufen, wenn onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone von Sortable.js mit demselben Argument ausgelöst werden.
Siehe hier als Referenz
Beachten Sie, dass der OnMove-Rückruf von SortableJS der Move-Requisite zugeordnet ist
HTML:
< draggable :list =" list " @end =" onEnd " >Ereignis ändern
change wird ausgelöst, wenn die Listenprop nicht null ist und das entsprechende Array aufgrund des Drag-and-Drop-Vorgangs geändert wird.
Dieses Ereignis wird mit einem Argument aufgerufen, das eine der folgenden Eigenschaften enthält:
added : Enthält Informationen zu einem dem Array hinzugefügten ElementnewIndex : der Index des hinzugefügten Elementselement : das hinzugefügte Elementremoved : Enthält Informationen zu einem Element, das aus dem Array entfernt wurdeoldIndex : der Index des Elements vor dem Entfernenelement : das entfernte Elementmoved : enthält Informationen zu einem Element, das innerhalb des Arrays verschoben wurdenewIndex : der aktuelle Index des verschobenen ElementsoldIndex : der alte Index des verschobenen Elementselement : das verschobene ElementEinschränkung: Weder Kopf- noch Fußzeilenslot funktionieren in Verbindung mit der Übergangsgruppe.
Verwenden Sie den header Slot, um ein nicht ziehbares Element innerhalb der vuedraggable-Komponente hinzuzufügen. Wichtig: Es sollte in Verbindung mit der Option „Draggable“ verwendet werden, um ziehbare Elemente zu kennzeichnen. Beachten Sie, dass der Header-Slot unabhängig von seiner Position in der Vorlage immer vor dem Standard-Slot hinzugefügt wird. Ex:
< 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 > Verwenden Sie den footer -Slot, um nicht ziehbare Elemente innerhalb der vetragbaren Komponente hinzuzufügen. Wichtig: Es sollte in Verbindung mit der Draggable-Option verwendet werden, um ziehbare Elemente zu kennzeichnen. Beachten Sie, dass der Fußzeilenbereich immer nach dem Standardbereich hinzugefügt wird, unabhängig von seiner Position in der Vorlage. Ex:
< 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-Kinder sollten die Liste oder Wert-Requisite immer mithilfe einer v-for-Direktive zuordnen
Untergeordnete Elemente in v-for sollten wie jedes andere Element in Vue.js verschlüsselt werden. Achten Sie insbesondere auf die Angabe relevanter Schlüsselwerte:
ziehbares Beispiel
Siehe hier
