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

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

Lucas Fabian Marques Tomaz Silva
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>



  


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

Alexa Bolada
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.


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

Lucas Fabian Marques Tomaz Silva
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


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

Lucas Fabian Marques Tomaz Silva
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>







Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts