JQuery UI + formbuilder + JSON não funciona como o esperado [RESOLVIDO]

1. JQuery UI + formbuilder + JSON não funciona como o esperado [RESOLVIDO]

Lfabian
(usa Debian)

Enviado em 11/02/2023 - 11:42h

Saudações, estou tendo dificuldade em aprender javascript, estou tentando renderizar objetos arrastáveis atrávés do formbuilder porém não funciona como esperado, onde estou errando?

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jQuery UI Draggable - Default functionality</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

  <style>

  #dragObject { width: 50px; height: 50px; padding: 0.5em; }

  </style>

  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

  <script src="https://formbuilder.online/assets/js/form-render.min.js"></script>



</head>

<body>

 

<div id="dragObject" class="ui-widget-content draggable">

  <p>Drag me around</p>

</div>

 

<div id="form-render"></div>

<script>

  var formData = [

    {

      "type": "button",

      "label": "Button",

      "className": "btn-default btn draggable",

      "name": "button-1",

    }

  ];



  $("#form-render").formRender({

    formData: formData

  });

  $( function() {

    $( ".draggable" ).draggable();

  } );



  $("#form-render").formRender({

    formData: formData

  });

  $( function() {

    $( ".draggable" ).draggable();

  } );

</script>



</body>

</html>

0 0

Quote

2. Re: JQuery UI + formbuilder + JSON não funciona como o esperado [RESOLVIDO]

alexabolada
(usa Debian)

Enviado em 11/02/2023 - 11:43h

Parece que o seu problema está relacionado ao plugin JQuery UI. Tente usar o plugin JQRangeSlider em vez da UI do JQuery para criar elementos arrastáveis. É importante que os nomes dos elementos no seu código sejam diferentes para evitar que eles sejam conflituosos.

Além disso, certifique-se de que os diretórios dos scripts JS são acessíveis ao seu servidor. Verifique se os arquivos foram colocados no diretório correto e se eles ligam corretamente para a função desejada.

Por último, certifique-se de que seu código está sintaticamente correto, pois pode haver erros de digitação ou erros de sintaxe, como um parênteses mal posicionado ou uma vírgula a mais ou a menos.

0 0

Quote

3. Re: JQuery UI + formbuilder + JSON não funciona como o esperado [RESOLVIDO]

Lfabian
(usa Debian)

Enviado em 11/02/2023 - 12:04h

Andei inspecionando, e acontece que a classe draggable está sendo adiciona no elemento button e não em uma div, teria outro método de renderizar apartir de um JSON além do formbuilder? não consegui fazer nada além de formulários com ele

0 0

Quote

4. Re: JQuery UI + formbuilder + JSON não funciona como o esperado [RESOLVIDO]

Lfabian
(usa Debian)

Enviado em 11/02/2023 - 13:36h

Consegui gerar os elementos fazendo esse script, mas queria saber se há algum plugin que faça algo assim. A idéia geral, é que o usuário possa mover, editar os elementos e salvar e então seria armazenado o JSON no banco.



<!DOCTYPE html>

<html>

<head>

  <title>Exemplo de geração de HTML a partir de um JSON</title>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <style>

    .draggable {

      width: 100px;

      background-color: lightgray;

      border: 1px solid black;

      padding: 10px;

    }

	#dragObject { width: 50px; padding: 0.5em; }

  </style>

</head>

<body>

  <div id="conteiner">

  <div id="dragObject" class="ui-widget-content draggable">

  <p>Drag me around</p>

</div>

  </div>



  <script>

    $(function() {

      function criarElementos(formData) {

        var elementos = [];

        for (var i = 0; i < formData.length; i++) {

          var elemento = $("<" + formData[i].type + ">");

          if (formData[i].label) {

            elemento.html(formData[i].label);

          }

          if (formData[i].className) {

            elemento.addClass(formData[i].className);

          }

          if (formData[i].name) {

            elemento.attr("name", formData[i].name);

          }

          if (formData[i].content) {

            var subElementos = criarElementos(formData[i].content);

            for (var j = 0; j < subElementos.length; j++) {

              elemento.append(subElementos[j]);

            }

          }

          elementos.push(elemento);

        }

        return elementos;

      }

	  var formData = [

        {

          "type": "div",

          "label": "",

          "className": "draggable",

          "content": [

            {

              "type": "button",

              "label": "Button",

              "className": "btn-default btn",

              "name": "button-1",

            },

            {

              "type": "p",

              "label": "Primeira linha<br>Segunda linha",

              "className": "texto-exemplo",

              "name": "texto-1",

            }

          ]

        }

      ];



      var items = criarElementos(formData);

      for (var i = 0; i < items.length; i++) {

        $("#conteiner").append(items[i]);

      }



      $(".draggable").draggable();

    });

  </script>

</body>

</html>