Desenvolvimento de Componente Web para Filtros com Recursos de Arrastar

Nós temos uma página onde o cliente configura uma série de filtros.
No momento temos por exemplo uns 20 campos. O padrão de layout  que nós temos já não está deixando a experiência legal, por a página está ficando muito grande.


Nossa ideia é que essa campos fiquem numa pequena lista, e que o cliente possa arrastar dessa lista para o área de campos selecionados. Nessa área ele pode de fato configurar o filtro, escolher o tipo de filtragem (=, !=, in etc), bem como aninhar os campos com operadores (E e Ou).
Por fim, depois que o cliente configurar tudo, o componente precisa fornecer um objeto em JSON com tudo que foi configurado.


1) JS (preferência jquery, mais usar outras bibliotecas) + Html + CSS

2) Criar Componente Editor de Filtros

3) No inicializador do componente ele vai receber as seguintes informações:
    Lista de Campos
        Cada elemento possui (Nome, Elemento Pai, Categoria, Palavras chaves ou outras coisas)
        Cada elemento também PODE vai possuir uma lista de possiveis valores (pode ser um array ou url ajax de consulta)
    Tipos de elementos:
        1) Valor Livre
        2) Valor DropDown (Unico elemento de uma lista*)
        3) Valor MultiSelect (Vários elementos de um lista*)
        4) Elemento Html (Nessa caso basta exibir elemento já renderizado, ex: #InputABC
    Algumas listas depende de valores selecionados em outra lista, portanto na codificacao, é importante que a lista possa ser refeita

4) A ideia geral é que o cliente selecione (ou arraste) da Listagem de campos possiveis (Eles devem vir agrupados em estrutura de árvore com base no pai/categoria)
e jogue em outra área de campos selecionados

5) Na área de campos selecionados, cada elemento vai possui o operador (na lista, fora da lista, padrão etc)
e valor do filtro (multiselect no caso de listagens ou valor livre).

6) os elementos selecionados também poderão ser conectados entre si com operadores (E e OU)

7) Para consumir o componente, este deverá ter uma função que retorne um JSON com o estado de cada elemento

8) Poder pesquisar/filtrar os campos disponiveis (via Nome, palaras chaves do campo, ou algum outro atributo)

9) Perfomance é importante (Alguns elementos poderão ter mais de 10.000 items para selecionar, por isso o ideal é pensar sempre no lazy load)

10) Atenção com XSS

11) Layout é Livre, mas de preferência com as cores que já usamos. Evitar atrelar com #id, dar preferencia a class ou atributos.

12) css com less é muito bem-vindo

13) codificacao, dar preferência a orientacao a objetos ou pelo menos que seja dividido em funcoes menores (nao ficar um scriptao de funcao unica)

14) rascunho das definições dos campos de filtros:
{
  "filterfields": [
    {
      "id": "nome",
      "name": "nome",
      "parentid": null,
      "type" : "freetext"
      "values": [
        "fulano",
        "ciclano"
      ]
    },
    {
      "id": "rg",
      "name": "r.G",
      "parentId": "nome",
      "type" : "MultiSelect"
      "values": [
        "2xx",
        "131"
      ]
    },
    {
      "id": "tipoValor",
      "name": "Tipo de Valor",
      "parentId": "",
      "type" : "DropDown"
      "values": [
        "A",
        "B"
      ]
    },
    {
      "id": "telefone",
      "name": "Telefone",
      "parentId": "nome",
      "type" : "Element"
      "elementSelector": "#InputAbc"
    }
  ]
}