Não muito tempo atrás, a funcionalidade arrastar e soltar raramente era usada em aplicativos da web. Com o HTML5 entrando em cena, o recurso de arrastar e soltar nativo tornou-se facilmente acessível e popular. A funcionalidade que antes exigia muitos esforços de codificação, agora pode ser adicionada com algumas linhas de código HTML. Ao desenvolver a biblioteca Webix, tentamos manter todos os recursos e vantagens do arrastar e soltar nativo. Ao mesmo tempo, adicionamos novos recursos que podem ser úteis no desenvolvimento de aplicativos da web.
Arrastar e soltar no nível do componente
Enquanto o arrastar e soltar do HTML5 se concentra em um elemento HTML, o arrastar e soltar do Webix ( http://webix.com/widgets/ ) concentra-se nos componentes da IU.
Todos os componentes de dados Webix UI suportam a funcionalidade de arrastar e soltar. Com uma única linha de código, você pode ativar o recurso de arrastar e soltar para componentes como List, DataTable, Tree, TreeTable, DataView.
webix.ui({
view:"list",
drag:true
});Se você tiver dois componentes com arrastar e soltar habilitado na página, já é suficiente ser capaz de arrastar elementos entre esses componentes. Não há limitações para arrastar linhas da Grade para a Árvore ou de TreeTable para a Lista.
Esse tipo de arrastar e soltar irrestrito dificilmente é útil. É por isso que o Webix permite especificar funções dos componentes usando a mesma propriedade de arrastar.
webix.ui({
view:"tree",
drag:"source"
});
webix.ui({
view:"datatable",
drag:"target"
});Essa inicialização permite arrastar e soltar apenas da Árvore para DataTable (do componente marcado como arrastar: “origem” para aquele marcado como arrastar: “destino”).
O outro caso de uso de arrastar e soltar é a reordenação de itens (linhas, nós de árvore, itens de lista, etc). O Webix também fornece um modelo pronto para uso para reordenamento:
webix.ui({
view:"list",
drag:"order"
});
</>O componente com o modo de reordenação habilitado permite arrastar e soltar apenas dentro dele mesmo. Por exemplo, no caso da grade, o usuário pode reordenar as linhas usando arrastar e soltar, mas não pode arrastar as linhas para fora da grade.
Arrastar e soltar no nível HTML
Apesar do Webix ser orientado a componentes, a Biblioteca também oferece suporte para arrastar e soltar para elementos HTML personalizados. Ele fornece uma flexibilidade extra, conforme você utiliza o recurso Arrastar e Soltar com seu próprio conteúdo HTML ou com alguma biblioteca de terceiros.
Para tornar acessível qualquer elemento na queda de página, é suficiente escrever algo como:
<input type="text" id="mytext">
<script>
webix.DragControl.addDrop("mytext");
</script>O fragmento de código acima permitirá que o usuário final solte qualquer elemento de um componente Webix na entrada HTML. No aplicativo da vida real, precisamos definir qual propriedade do objeto arrastado será mostrada na entrada, portanto, precisamos de um pouco mais de código. Algo semelhante ao seguinte:
webix.DragControl.addDrop("mytext", {
$drop:function(source, target, event){
var dnd = webix.DragControl.getContext();
target.value = dnd.from.getItem(dnd.source[0]).title;
}
})Como você pode ver, é o mesmo código, mas também criamos um manipulador de descarte que define a lógica de transformação de dados.
A tarefa inversa de arrastar um elemento HTML para um componente Webix é realizada de maneira semelhante:
<div id="divA" style='float:left; padding:20px; background-color:#dff;'> A </div>
<script>
webix.DragControl.addDrag("divA");
</script>Para lidar com arrastar e soltar corretamente, devemos especificar o evento onBeforeDrop para o componente Webix:
webix.ui({
view:"datatable",
on:{
onBeforeDrop:function(context, e){
this.getItem(context.target).title = context.source.innerHTML;
this.refresh(context.target);
return false;
}
}
});Arrastar e soltar HTML5 nativo
Embora todos os exemplos acima estejam usando a implementação personalizada de arrastar e soltar, é possível fazer uma ponte entre HTML5 e arrastar e soltar nativo.
O código a seguir é necessário para criar um elemento HTML5 arrastável:
<div draggable="true" ondragstart="drag(event)" > A </div>
<script type="text/javascript" charset="utf-8">
function drag(ev){
ev.dataTransfer.setData("title",ev.target.innerHTML);
}
</script>Para definir um componente Webix como destino de soltar para tal recipiente HTML, você pode usar o código como este:
var mygrid = webix.ui {
view: “datatable”,
};
webix.event(mygrid.$view, "dragover", function(e){ e.preventDefault(); });
webix.event(mygrid.$view, "drop", function(e){
var grid = $$(e);
var id = grid.locate(e);
grid.getItem(id).title = e.dataTransfer.getData("title");
grid.refresh(id);
});Com este código, estamos:
– criando um componente de tabela de dados Webix
– anexando o manipulador de arrastar para habilitar HTML5 soltando na área da grade
– anexando o manipulador de soltar para definir como os dados do elemento arrastado precisam ser usados na grade
Como resultado, um elemento HTML personalizado pode ser arrastado e solto na tabela de dados do Webix. De maneira semelhante, podemos combinar qualquer solução de arrastar e soltar existente, baseada em HTML5, e a funcionalidade de arrastar e soltar do Webix.
Conclusão
Como você pode ver, existem muitas maneiras diferentes de usar arrastar e soltar em componentes Webix, e todas elas são fáceis de implementar. Os exemplos acima mostram os fundamentos das implementações de arrastar e soltar. No entanto, essa funcionalidade contém muito mais eventos e opções de configuração. Se necessário, qualquer aspecto de arrastar e soltar é facilmente redefinido. Aqui você pode aprender mais sobre isso: http://docs.webix.com/desktop__dnd.html .
Devido à flexibilidade do Webix, você pode manter a implementação de arrastar e soltar do Webix, usar arrastar e soltar HTML5 nativo ou combiná-los para obter a melhor experiência do usuário.