Skip to main content
removeu 67 caracteres do conteúdo
Fonte Link
KaduAmaral
  • 11,7mil
  • 1
  • 34
  • 81
var// ComponentesEsse =é {
um json que "input":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){
   retorna = retorna// ==Parâmetro undefinedpara ?recursividade false(adicionar :elementos retorna;filhos)
    
 retorna = retorna == console.log(componente);
undefined ? false : retorna;
   if(Componentes == null){
    // Componente alert("Osescolhido componentesfoi aindaarmazenado nãona foramvariável carregados");c
    var c return= false;Componentes[componente];

   }

// Objeto para varregistro cdos =componentes, Componentes[componente];
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>

###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.

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
      }
   }
};


$(document).on('click', '#componentes .add', function(event){
   event.preventDefault();
 
   AddComponent( $(this).data('componente') );

 
});

function AddComponent(componente, retorna){
   retorna = retorna == undefined ? false : retorna;
    
     console.log(componente);
    
   if(Componentes == null){
      alert("Os componentes ainda não foram carregados");
      return false;
   }

   var c = Componentes[componente];

   var cmp = {
      'CID': Date.now(),
      'Type': componente
   };

   var $element = $('<'+c.Tag+' />');
   $element.addClass(c.Class+" component "+c.EditClass);


   if (c.Attributes != undefined && c.Attributes.length > 0)
      for(attr in c.Attributes)
         $element.attr(attr, c.Attributes[attr]);

   $element.attr('data-component', cmp.Type)
         .attr('data-cid', cmp.CID);

   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;
         }

      }
   }
      

   if (retorna)
      return $element;
   else
      $('#edit-area .active').append($element);
}
#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>

###Fiddler para testes

// 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>

###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.

adicionou 66 caracteres ao conteúdo
Fonte Link
KaduAmaral
  • 11,7mil
  • 1
  • 34
  • 81

O código é meramente para demonstração, testes e implementações, o código real variaé um pouco"pouquinho" maior. Aqui só tem o essencial para a criação do(s) elemento(s).

###Fiddler para testes

O código é meramente para demonstração, testes e implementações, o código real varia um pouco.

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).

###Fiddler para testes

Fonte Link
KaduAmaral
  • 11,7mil
  • 1
  • 34
  • 81

Drag e Drop componentes HTML com jQuery

Estou desenvolvendo um projeto, para meu curso acadêmico e tenho o seguinte código:

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
      }
   }
};


$(document).on('click', '#componentes .add', function(event){
   event.preventDefault();

   AddComponent( $(this).data('componente') );


});

function AddComponent(componente, retorna){
   retorna = retorna == undefined ? false : retorna;
    
    console.log(componente);
    
   if(Componentes == null){
      alert("Os componentes ainda não foram carregados");
      return false;
   }

   var c = Componentes[componente];

   var cmp = {
      'CID': Date.now(),
      'Type': componente
   };

   var $element = $('<'+c.Tag+' />');
   $element.addClass(c.Class+" component "+c.EditClass);


   if (c.Attributes != undefined && c.Attributes.length > 0)
      for(attr in c.Attributes)
         $element.attr(attr, c.Attributes[attr]);

   $element.attr('data-component', cmp.Type)
         .attr('data-cid', cmp.CID);

   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;
         }

      }
   }
      

   if (retorna)
      return $element;
   else
      $('#edit-area .active').append($element);
}
#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 varia um pouco.

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.

Mais ou menos nesse estilo.

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.