Vue.Draggable
v2.24.3
Componente Vue (Vue.js 2.0) o directiva (Vue.js 1.0) que permite arrastrar y soltar y sincronizar con la matriz de modelos de vista.
Basado y ofreciendo todas las características de Sortable.js
Ver vue.draggable.next
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/
tag y accesorios componentData ¡Buscamos patrocinadores!
¿Encuentra útil este proyecto? ¿Puedes comprarme un ☕ o un ?
yarn add vuedraggable
npm i -S vuedraggableTenga en cuenta que se puede arrastrar para Vue 2.0 y no se puede arrastrar para la versión 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 sección de ejemplo
Utilice componente arrastrable:
< 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 >Archivo .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 > El componente que se puede arrastrar debe envolver directamente los elementos que se pueden arrastrar, o un transition-component que contenga los elementos que se pueden arrastrar.
< 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 )
}
}
} Tipo: Array
Requerido: false
Predeterminado: null
Matriz de entrada al componente arrastrable. Normalmente, la misma matriz a la que hace referencia la directiva v-for del elemento interno.
Esta es la forma preferida de utilizar Vue.draggable ya que es compatible con Vuex.
No debe usarse directamente sino únicamente a través de la directiva v-model :
< draggable v-model =" myArray " > Tipo: Array
Requerido: false
Predeterminado: null
Como alternativa a la propuesta value , la lista es una matriz que se sincroniza con arrastrar y soltar.
La principal diferencia es que la propiedad list se actualiza mediante un componente que se puede arrastrar mediante el método de empalme, mientras que value es inmutable.
No lo use junto con una propuesta de valor.
Nuevo en la versión 2.19
Las opciones ordenables se pueden configurar directamente como accesorios vue.draggable desde la versión 2.19.
Esto significa que todas las opciones ordenables son accesorios ordenables válidos con la notable excepción de todos los métodos que comienzan con "on", ya que el componente arrastrable expone la misma API a través de eventos.
Se admiten las propiedades kebab-case: por ejemplo, los accesorios ghost-class se convertirán en la opción ordenable ghostClass .
Ejemplo de identificador de configuración, ordenable y una opción de grupo:
< draggable
v-model =" list "
handle =" .handle "
:group =" { name: 'people', pull: 'clone', put: false } "
ghost-class =" ghost "
:sort =" false "
@change =" log "
>
draggable > Tipo: String
Predeterminado: 'div'
Tipo de nodo HTML del elemento que el componente arrastrable crea como elemento externo para la ranura incluida.
También es posible pasar el nombre del componente vue como elemento. En este caso, el atributo arrastrable se pasará al componente de creación.
Consulte también componenteData si necesita configurar accesorios o eventos para el componente creado.
Tipo: Function
Requerido: false
Predeterminado: (original) => { return original;}
Función llamada al componente de origen para clonar el elemento cuando la opción de clonación es verdadera. El argumento único es el elemento viewModel que se va a clonar y el valor devuelto es su versión clonada.
De forma predeterminada, vue.draggable reutiliza el elemento viewModel, por lo que debe usar este enlace si desea clonarlo o clonarlo en profundidad.
Tipo: Function
Requerido: false
Predeterminado: null
Si no es nula, esta función se llamará de forma similar a la devolución de llamada de Sortable onMove. Devolver falso cancelará la operación de arrastre.
function onMoveCallback ( evt , originalEvent ) {
...
// return false; — for cancel
}El objeto evt tiene la misma propiedad que el evento Sortable onMove y 3 propiedades adicionales:
draggedContext : contexto vinculado al elemento arrastradoindex : índice del elemento arrastradoelement : elemento arrastrado elemento de modelo de vista subyacentefutureIndex : índice potencial del elemento arrastrado si se acepta la operación de soltarrelatedContext : contexto vinculado a la operación de arrastre actualindex : índice del elemento de destinoelement : elemento de destino ver elemento de modelolist : lista de objetivoscomponent : objetivo VueComponentHTML:
< draggable :list =" list " :move =" checkMove " >javascript:
checkMove: function ( evt ) {
return ( evt . draggedContext . element . name !== 'apple' ) ;
}Ver ejemplo completo: Cancel.html, cancel.js
Tipo: Object
Requerido: false
Predeterminado: null
Estos accesorios se utilizan para pasar información adicional al componente secundario declarado mediante accesorios de etiqueta.
Valor:
props : accesorios que se pasarán al componente secundarioattrs : atributos que se pasarán al componente secundarioon : eventos a los que se suscribirá en el componente secundarioEjemplo (usando la biblioteca de UI de elementos):
< 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
}
} ;
}
}Soporte para eventos ordenables:
start , add , remove , update , end , choose , unchoose , sort , filter , clone
Los eventos se llaman cada vez que Sortable.js activa onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone con el mismo argumento.
Ver aquí como referencia
Tenga en cuenta que la devolución de llamada de SortableJS OnMove está asignada con la propiedad de movimiento
HTML:
< draggable :list =" list " @end =" onEnd " >evento de cambio
El evento change se activa cuando la propiedad de la lista no es nula y la matriz correspondiente se modifica debido a la operación de arrastrar y soltar.
Este evento se llama con un argumento que contiene una de las siguientes propiedades:
added : contiene información de un elemento agregado a la matriznewIndex : el índice del elemento agregadoelement : el elemento agregadoremoved : contiene información de un elemento eliminado de la matrizoldIndex : el índice del elemento antes de eliminarloelement : el elemento eliminadomoved : contiene información de un elemento movido dentro de la matriznewIndex : el índice actual del elemento movidooldIndex : el índice antiguo del elemento movidoelement : el elemento movidoLimitación: ni el encabezado ni el pie de página funcionan junto con el grupo de transición.
Utilice la ranura header para agregar un elemento que no se puede arrastrar dentro del componente vuedraggable. Importante: debe usarse junto con la opción arrastrable para etiquetar el elemento arrastrable. Tenga en cuenta que la ranura del encabezado siempre se agregará antes de la ranura predeterminada independientemente de su posición en la plantilla. 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 > Utilice la ranura footer para agregar un elemento que no se pueda arrastrar dentro del componente vuedraggable. Importante: debe usarse junto con la opción arrastrable para etiquetar elementos arrastrables. Tenga en cuenta que la ranura del pie de página siempre se agregará después de la ranura predeterminada, independientemente de su posición en la plantilla. 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 >Los niños de Vue.draggable siempre deben asignar la lista o valor de propiedad usando una directiva v-for
Los elementos secundarios dentro de v-for deben tener la clave como cualquier elemento en Vue.js. Tenga cuidado de proporcionar valores clave reveladores en particular:
ejemplo arrastrable
ver aquí
