Estou desenvolvendo um projeto, para meu curso acadêmico e tenho o seguinte código:
// Esse é um json que vem do banco de dados
var Componentes = {"input": {"Label": "Textbox","Tag": "input",
"Attributes": {"type": "text"},"Class": "form-control"},"btn":
{"Label": "Button","Tag": "button","Attributes": {"type": "button"},
"Class": "btn","Childrens":[{"Type": "text","Value": "Botão"}]},
"label": {"Label": "Label","Tag": "label","Class": "","Childrens":[
{"Type": "text","Value": "Label:"}]},"form-help":{"Label": "Form help",
"Tag": "span","Class": "help-block","Childrens":[{"Type": "text",
"Value": "I'm a help text."}]},"textbox": {"Label": "Textbox Group",
"Tag": "div","Class": "form-group","Siblings":[],"Childrens":[
{"Type": "component","Value":"label"}, {"Type": "component",
"Value":"input"},{"Type": "component","Value": "form-help"}],
"Rules": {"AllowChilds": false}}};
// Evento dos botões, tem que implementar um evento de Drag n Drop
$(document).on('click', '#componentes .add', function(event){
event.preventDefault();
AddComponent( $(this).data('componente') );
});
// Método que adiciona o componente
function AddComponent(componente, retorna){
// Parâmetro para recursividade (adicionar elementos filhos)
retorna = retorna == undefined ? false : retorna;
// Componente escolhido foi armazenado na variável c
var c = Componentes[componente];
// Objeto para registro dos componentes, pode ignorar
var cmp = {
'CID': Date.now(),
'Type': componente
};
// Elemento criado
var $element = $('<'+c.Tag+' />');
$element.addClass(c.Class+" component "+c.EditClass);
// Adiciona todos os atributos padrões no elemento
if (c.Attributes != undefined && c.Attributes.length > 0)
for(attr in c.Attributes)
$element.attr(attr, c.Attributes[attr]);
// Atributo de controle de edição, pode ignorar
$element.attr('data-component', cmp.Type)
.attr('data-cid', cmp.CID);
// Adiciona todos os elementos filhos
if (c.Childrens != undefined && c.Childrens.length > 0){
for(children in c.Childrens){
switch(c.Childrens[children].Type){
case "component":
$element.append( AddComponent(c.Childrens[children].Value, true) );
break;
case "text":
$element.text( c.Childrens[children].Value );
break;
}
}
}
// Verifica se é pra adicionar a área de design ou retornar o elemento
// para ser adicionado a um elemento pai
if (retorna)
return $element;
else
$('#edit-area .active').append($element);
}
/* CSS meramente para demostração*/
#edit-area {
display: block;
margin-bottom:20px;
box-sizing: content-box;
min-height: 200px;
position: relative;
overflow: auto;
background: #E0E0E0;
}
.row{
background:white;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
margin:10px;
padding:5px;
min-height:30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-9 col-md-9">
<div id="edit-area">
<div class="row">
<div class="col-lg-12 col-md-12 active"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3" id="componentes">
<div class="list-group">
<button class="add list-group-item" data-componente="textbox">Textbox Group</button>
<button class="add list-group-item" data-componente="input">Input</button>
<button class="add list-group-item" data-componente="btn">Botão</button>
</div>
</div>
</div>
O código é meramente para demonstração, testes e implementações, o código real é um "pouquinho" maior. Aqui só tem o essencial para a criação do(s) elemento(s).
Com este código eu consigo criar um componente ao clicar em um botão da lista. O meu objetivo é usar o estilo Drag n Drop, clicar sobre um botão e arrastar até a área que eu quero.
Como eu poderia fazer isso usando apenas jQuery (sem usar plugins ou outras bibliotecas). Se possível ter opção de reposiciona-los após serem criados.
Fiddler para testes
Não tem problema criar novos elementos para o manuseio do componente, pois os componentes são armazenados em objetos (com ids, tipos, propriedades e etc.) e depois salvo no banco de dados os elementos HTML gerados somente são para o visual do designer.