3

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.

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.

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.

3
  • Podes usar o jQuery-UI? ou queres mesmo sem nada para alem do jQuery.js?
    – Sergio
    Commented 17/07/2015 às 21:07
  • Apenas o jQuery mesmo @Sergio.
    – KaduAmaral
    Commented 17/07/2015 às 21:09
  • @Sergio não tem problema criar tags extras para envolver o componente. To saindo do serviço agora, quando chegar em casa eu dou uma comentada no código se precisar.
    – KaduAmaral
    Commented 17/07/2015 às 21:20

1 Resposta 1

3

Esta pergunta é meio ampla pois essa funcionalidade é relativamente complexa. Ainda assim, é muito útil e deixo aqui uma sugestão sobre a parte do drag & drop.

Para arrastar um elemento é preciso saber várias coisas:

  • posição do mouse
  • o elemento que se está a arrastar
  • a posição do elemento destino

Ao largar o elemento precisamos saber se ele está dentro do elemento destino para confirmar ou cancelar o arraste.

Assim criei funções para o que referi em cima e variáveis globais que guardam "o estado das coisas".

$(document).ready(function () {
    var targetEl = document.getElementById('edit-area'); // elemento destino
    var target = targetEl.getBoundingClientRect(); // dimensões 
    var startPosition; // para guardar a posição inicial do elemento caso queiramos cancelar
    var dragging = null; // flag para saber se há drag ativo
    var offset; // diferença entre canto do elemento e onde o mouse tocou

    function offsetDiff(el, ev) { // calcular diferença entre canto do elemento e onde o mouse tocou
        var elPos = el.getBoundingClientRect();
        return {
            x: ev.pageX - elPos.left,
            y: ev.pageY - elPos.top
        }
    }

    function isInsideTarget(el) { // saber se elemento arrastado está dentro do elemento destino
        var elPos = el.getBoundingClientRect();
        var alignedX = target.left <= elPos.left && target.right >= elPos.right;
        var alignedY = target.top <= elPos.top && target.bottom >= elPos.bottom;
        if (alignedX && alignedY) return true;
        return false;
    }

    function drop(el, cancel) { // largar ou cancelar
        dragging = null;
        el.style.position = 'relative';
        el.style.left = 'auto';
        el.style.top = 'auto';
        if (cancel) return;
        el.classList.remove('add');
        $(targetEl).append(el);
    }

    $(document.body).on("mousemove", function (e) {
        if (!dragging) return;
        $(dragging).offset({
            top: e.pageY - offset.y,
            left: e.pageX - offset.x
        });

    });


    $(document.body).on('mousedown', '.add', function (e) {
        dragging = e.target;
        offset = offsetDiff(dragging, e);
        startPosition = dragging.getBoundingClientRect();

    });

    $(document.body).on("mouseup", function (e) {
        if (!dragging) return;
        var isDroppable = isInsideTarget(dragging);
        drop(dragging, !isDroppable);
    });
});

jsFiddle: http://jsfiddle.net/anuuascq/

4
  • Sergio, não é ampla, a minha dúvida é como arrastar o elemento que é criado pela minha função, em vez do botão. Se fosse só arrastar o botão seria muito mais simples.
    – KaduAmaral
    Commented 18/07/2015 às 13:50
  • @KaduAmaral a função que referes é AddComponent? Com o meu código tendo a classe .add novos elementos são arrastáveis. A minha resposta ajuda ou falhei no que precisas?
    – Sergio
    Commented 18/07/2015 às 14:11
  • Eu ainda não tive tempo pra testar, talvez segunda te dou um retorno
    – KaduAmaral
    Commented 18/07/2015 às 14:19
  • Fiz um update no teu JSFiddle para mais ou menos o que eu preciso. Consegui implementar pra criar o elemento e arrasta-lo, mas estou tendo que clicar 2x tem como já no primeiro clique fazer isso? Outra coisa, tenho varias áreas de drop, mas quando eu jogo em uma cai em todas. Outro problema é uma discrepância da posição do elemento com a do cursor.
    – KaduAmaral
    Commented 24/07/2015 às 20:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .