Vue.Draggable
v2.24.3
Composant Vue (Vue.js 2.0) ou directive (Vue.js 1.0) permettant le glisser-déposer et la synchronisation avec le tableau de modèles de vue.
Basé sur et offrant toutes les fonctionnalités de Sortable.js
Voir vue.draggable.next
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/
tag et componentData À la recherche de sponsors !
Vous trouvez ce projet utile ? Tu peux m'acheter un ☕ ou un ?
yarn add vuedraggable
npm i -S vuedraggableAttention il est vuedraggable pour Vue 2.0 et non vue-draggable qui est pour la 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 >cf rubrique exemple
Utiliser un composant déplaçable :
< 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 >Fichier .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 > Le composant déplaçable doit envelopper directement les éléments déplaçables, ou un transition-component contenant les éléments déplaçables.
< 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 )
}
}
} Type : Array
Obligatoire : false
Par défaut : null
Tableau d’entrée vers un composant déplaçable. Généralement le même tableau que celui référencé par la directive v-for de l'élément interne.
C'est la manière préférée d'utiliser Vue.draggable car elle est compatible avec Vuex.
Il ne doit pas être utilisé directement mais uniquement via la directive v-model :
< draggable v-model =" myArray " > Type : Array
Obligatoire : false
Par défaut : null
Alternative à la propriété value , list est un tableau à synchroniser par glisser-déposer.
La principale différence est que la prop list est mise à jour par un composant déplaçable à l'aide de la méthode splice, alors que value est immuable.
Ne pas utiliser en conjonction avec la valeur prop.
Nouveau dans la version 2.19
Les options triables peuvent être définies directement en tant qu'accessoires vue.draggable depuis la version 2.19.
Cela signifie que toutes les options triables sont des accessoires triables valides, à l'exception notable de toutes les méthodes commençant par "on", car les composants déplaçables exposent la même API via des événements.
Les propriétés kebab-case sont prises en charge : par exemple, les accessoires ghost-class seront convertis en option triable ghostClass .
Exemple de poignée de réglage, triable et une option de groupe :
< draggable
v-model =" list "
handle =" .handle "
:group =" { name: 'people', pull: 'clone', put: false } "
ghost-class =" ghost "
:sort =" false "
@change =" log "
>
draggable > Type : String
Par défaut : 'div'
Type de nœud HTML de l'élément créé par le composant déplaçable en tant qu'élément externe pour l'emplacement inclus.
Il est également possible de passer le nom du composant vue en tant qu'élément. Dans ce cas, l'attribut déplaçable sera transmis au composant de création.
Voir également composantData si vous devez définir des accessoires ou un événement sur le composant créé.
Type : Function
Obligatoire : false
Par défaut : (original) => { return original;}
Fonction appelée sur le composant source pour cloner l'élément lorsque l'option clone est vraie. L'argument unique est l'élément viewModel à cloner et la valeur renvoyée est sa version clonée.
Par défaut, vue.draggable réutilise l'élément viewModel, vous devez donc utiliser ce hook si vous souhaitez le cloner ou le cloner en profondeur.
Type : Function
Obligatoire : false
Par défaut : null
Si elle n’est pas nulle, cette fonction sera appelée de la même manière que le rappel Sortable onMove. Renvoyer false annulera l’opération de glisser.
function onMoveCallback ( evt , originalEvent ) {
...
// return false; — for cancel
}L'objet evt a la même propriété que l'événement Sortable onMove et 3 propriétés supplémentaires :
draggedContext : contexte lié à l'élément glisséindex : index de l'élément glisséelement : élément glissé sous-jacent à l'élément de modèle de vuefutureIndex : index potentiel de l'élément glissé si l'opération de dépôt est acceptéerelatedContext : contexte lié à l'opération de glisser en coursindex : index de l'élément cibleelement : élément de modèle de vue de l'élément ciblelist : liste ciblecomponent : cible VueComponentHTML :
< draggable :list =" list " :move =" checkMove " >javascript :
checkMove: function ( evt ) {
return ( evt . draggedContext . element . name !== 'apple' ) ;
}Voir exemple complet : Cancel.html, Cancel.js
Type : Object
Obligatoire : false
Par défaut : null
Ces accessoires sont utilisés pour transmettre des informations supplémentaires au composant enfant déclaré par les accessoires de balise.
Valeur:
props : accessoires à transmettre au composant enfantattrs : attrs à passer au composant enfanton : événements à souscrire dans le composant enfantExemple (en utilisant la bibliothèque d'éléments 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
}
} ;
}
}Prise en charge des événements triables :
start , add , remove , update , end , choose , unchoose , sort , filter , clone
Les événements sont appelés chaque fois que onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone sont déclenchés par Sortable.js avec le même argument.
Voir ici pour référence
Notez que le rappel SortableJS OnMove est mappé avec la prop move
HTML :
< draggable :list =" list " @end =" onEnd " >changement d'événement
L'événement change est déclenché lorsque list prop n'est pas nul et que le tableau correspondant est modifié en raison d'une opération de glisser-déposer.
Cet événement est appelé avec un argument contenant l'une des propriétés suivantes :
added : contient les informations d'un élément ajouté au tableaunewIndex : l'index de l'élément ajoutéelement : l'élément ajoutéremoved : contient les informations d'un élément supprimé du tableauoldIndex : l'index de l'élément avant suppressionelement : l'élément supprimémoved : contient les informations d'un élément déplacé dans le tableaunewIndex : l'index actuel de l'élément déplacéoldIndex : l'ancien index de l'élément déplacéelement : l'élément déplacéLimitation : aucun emplacement d'en-tête ou de pied de page ne fonctionne conjointement avec transition-group.
Utilisez l'emplacement header pour ajouter un élément non déplaçable à l'intérieur du composant vuedraggable. Important : il doit être utilisé conjointement avec l'option déplaçable pour baliser l'élément déplaçable. Notez que l'emplacement d'en-tête sera toujours ajouté avant l'emplacement par défaut, quelle que soit sa position dans le modèle. 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 > Utilisez l'emplacement footer pour ajouter un élément non déplaçable à l'intérieur du composant vuedraggable. Important : il doit être utilisé conjointement avec l'option déplaçable pour baliser les éléments déplaçables. Notez que l'emplacement de pied de page sera toujours ajouté après l'emplacement par défaut, quelle que soit sa position dans le modèle. 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 >Les enfants Vue.draggable doivent toujours mapper la liste ou la valeur prop à l'aide d'une directive v-for
Les éléments enfants à l'intérieur de v-for doivent être saisis comme n'importe quel élément dans Vue.js. Attention à fournir des valeurs clés pertinentes notamment :
exemple déplaçable
Voir ici
