Painel de arrastamento e largada em HTML com elementos redimensionáveis

Estou a tentar desenvolver um controlo onde se deve ser capaz de adicionar elementos, movê-los e redimensioná-los. A ideia é desenhar pequenos diagramas arrastando alguns elementos para o painel. Eis o que estou a tentar fazer:

• o painel de instrumentos deve ter limites fixos (esquerda/direita/baixo/cima). Os elementos devem colidir com eles e não ir além.

• elementos podem ser adicionados com um botão ou arrastados de um repositório

• Os elementos devem ser dimensionável

• Os elementos devem colidir

• elementos devem ser móveis-freestyle, não ajustar no topo como gridster ou gridstack. Eu preciso ser capaz de colocar um elemento no fundo ou no meio do painel e ter espaços vazios.

• eu devo ser capaz de obter todos os dados necessários a partir dos elementos, a fim de armazenar e recriar o painel de instrumentos (save & load).

comecei por criar Este pequeno projecto de teste usando the drag & drop features, but soon got the feeling I was trying to reinvent the wheel and maybe doing it in an unnecssary old fashioned way.

mas depois de algumas pesquisas, eu ainda não encontrei um plugin/controle que se comporta da maneira que eu preciso ou é fácil o suficiente para que eu mude.

O Gridster e o gridstack fazem os elementos irem para o topo. TinyDraggable parece bom, mas não é resizable. Eu tentei fazer os elementos div .resizable() (adicionando o jQueryUI) mas eu não fui capaz de fazê-lo trabalhar. Este plugin não tem (eu acho) colisões, o que seria OK se eu consegui obter tudo o resto necessário. Eu gosto da liberdade de movimento dos itens draggable em comparação com o meu projeto minúsculo, onde eles vão de fenda para Fenda.

então, a questão é: você sabe se há algum plugin adequado (jQuery) para mim? Pronto para usar ou fácil de configurar/alterar?

Muito obrigado.