Vue.Draggable
v2.24.3
Componente Vue (Vue.js 2.0) ou diretiva (Vue.js 1.0) permitindo arrastar e soltar e sincronização com array de modelo de visualização.
Baseado e oferecendo todos os recursos do Sortable.js
Veja vue.draggable.next
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/
tag e adereços componentData Procurando apoiadores!
Acha este projeto útil? Você pode me comprar um ☕ ou um?
yarn add vuedraggable
npm i -S vuedraggableCuidado, é vuedraggable para Vue 2.0 e não vue-arrastável, que é para a versão 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 >seção de exemplo cf
Use componente arrastável:
< 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 >Arquivo .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 > O componente arrastável deve envolver diretamente os elementos arrastáveis ou um transition-component contendo os elementos arrastáveis.
< 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
Obrigatório: false
Padrão: null
Matriz de entrada para componente arrastável. Normalmente, a mesma matriz referenciada pela diretiva do elemento interno v-for.
Esta é a forma preferida de usar Vue.draggable, pois é compatível com Vuex.
Não deve ser usado diretamente, mas apenas através da diretiva v-model :
< draggable v-model =" myArray " > Tipo: Array
Obrigatório: false
Padrão: null
Alternativa à proposta value , list é um array a ser sincronizado com arrastar e soltar.
A principal diferença é que a propriedade list é atualizada pelo componente arrastável usando o método splice, enquanto value é imutável.
Não use em conjunto com a proposta de valor.
Novo na versão 2.19
As opções classificáveis podem ser definidas diretamente como adereços vue.draggable desde a versão 2.19.
Isso significa que todas as opções classificáveis são adereços classificáveis válidos, com a notável exceção de todos os métodos começando com "on", pois o componente arrastável expõe a mesma API por meio de eventos.
Propriedades kebab-case são suportadas: por exemplo, adereços ghost-class serão convertidos para a opção classificável ghostClass .
Exemplo de configuração de identificador, classificável e uma opção 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
Padrão: 'div'
Tipo de nó HTML do elemento que o componente arrastável cria como elemento externo para o slot incluído.
Também é possível passar o nome do componente vue como elemento. Neste caso, o atributo arrastável será passado para o componente de criação.
Consulte também componentData se precisar definir adereços ou eventos para o componente criado.
Tipo: Function
Obrigatório: false
Padrão: (original) => { return original;}
Função chamada no componente de origem para clonar o elemento quando a opção de clone for verdadeira. O argumento exclusivo é o elemento viewModel a ser clonado e o valor retornado é sua versão clonada.
Por padrão, vue.draggable reutiliza o elemento viewModel, então você deve usar este gancho se quiser cloná-lo ou cloná-lo profundamente.
Tipo: Function
Obrigatório: false
Padrão: null
Se não for nula, esta função será chamada de maneira semelhante ao retorno de chamada Sortable onMove. Retornar falso cancelará a operação de arrastar.
function onMoveCallback ( evt , originalEvent ) {
...
// return false; — for cancel
}O objeto evt tem a mesma propriedade do evento Sortable onMove e 3 propriedades adicionais:
draggedContext : contexto vinculado ao elemento arrastadoindex : índice do elemento arrastadoelement : elemento arrastado subjacente ao elemento do modelo de visualizaçãofutureIndex : índice potencial do elemento arrastado se a operação de soltar for aceitarelatedContext : contexto vinculado à operação de arrastar atualindex : índice do elemento alvoelement : elemento de modelo de visualização do elemento alvolist : lista de alvoscomponent : alvo VueComponentHTML:
< draggable :list =" list " :move =" checkMove " >javascript:
checkMove: function ( evt ) {
return ( evt . draggedContext . element . name !== 'apple' ) ;
}Veja exemplo completo: Cancel.html, cancel.js
Tipo: Object
Obrigatório: false
Padrão: null
Esses adereços são usados para passar informações adicionais ao componente filho declarado pelos adereços de tag.
Valor:
props : adereços a serem passados para o componente filhoattrs : atributos a serem passados para o componente filhoon : eventos a serem inscritos no componente filhoExemplo (usando a biblioteca de elementos 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
}
} ;
}
}Suporte para eventos classificáveis:
start , add , remove , update , end , choose , unchoose , sort , filter , clone
Os eventos são chamados sempre que onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone são acionados por Sortable.js com o mesmo argumento.
Veja aqui para referência
Observe que o retorno de chamada SortableJS OnMove é mapeado com a propriedade move
HTML:
< draggable :list =" list " @end =" onEnd " >alterar evento
O evento change é acionado quando a propriedade list não é nula e o array correspondente é alterado devido à operação de arrastar e soltar.
Este evento é chamado com um argumento contendo uma das seguintes propriedades:
added : contém informações de um elemento adicionado ao arraynewIndex : o índice do elemento adicionadoelement : o elemento adicionadoremoved : contém informações de um elemento removido do arrayoldIndex : o índice do elemento antes da remoçãoelement : o elemento removidomoved : contém informações de um elemento movido dentro do arraynewIndex : o índice atual do elemento movidooldIndex : o índice antigo do elemento movidoelement : o elemento movidoLimitação: nenhum slot de cabeçalho ou rodapé funciona em conjunto com o grupo de transição.
Use o slot header para adicionar um elemento não arrastável dentro do componente vuedraggable. Importante: deve ser usado em conjunto com a opção arrastável para marcar o elemento arrastável. Observe que o slot de cabeçalho sempre será adicionado antes do slot padrão, independentemente de sua posição no modelo. 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 > Use o slot footer para adicionar um elemento não arrastável dentro do componente vuedraggable. Importante: deve ser usado em conjunto com a opção arrastável para marcar elementos arrastáveis. Observe que o slot de rodapé sempre será adicionado após o slot padrão, independentemente de sua posição no modelo. 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 >Os filhos Vue.draggable devem sempre mapear a lista ou proposta de valor usando uma diretiva v-for
Os elementos filhos dentro de v-for devem ser digitados como qualquer elemento em Vue.js. Tenha o cuidado de fornecer valores-chave relevantes em particular:
exemplo arrastável
Veja aqui
