1
Good morning, you guys. This is a job I’m trying to do. This code creates clones of the compounds, which can then be dragged to a certain location(They can be dragged by clicking on the blue border). But I have a problem to get the values of the TEXTAREA field and the other fields but if you hope to get the text area I can do the rest. (If you feel better I can attach in Google driver already with libraries)
TODO Supply a title
<link href="../jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
<script src="../jquery-ui-1.12.1/jquery-ui.min.js"></script>
<style type="text/css">
*{
margin: 0px;
border:0px;
}
body{
background-color: rgb(255,255,255);
font-family: 'Gloria Hallelujah', cursive;
}
body>header{
background-color:#F5F5F5;
height: 83px;
box-shadow:1px 1px 5px black;
}
#logo img{
border: 1px solid black;
box-shadow: 1px 1px 1px black;
}
#logo{
display: inline-block;
margin-left:80px;
margin-top: 14px;
}
#divBusca{
background-color:#E0EEEE;
border:solid 1px black;
border-radius:10px;
width:450px;
height:32px;
margin-left: 400px;
margin-top: -48px;
}
#txtBusca{
float:left;
background-color:transparent;
padding-left:5px;
font-size:18px;
border:none;
height:32px;
width:370px;
}
#btnBusca{
border:none;
float:right;
height:32px;
border-radius:0 7px 7px 0;
width:70px;
font-weight:bold;
background:rgb(240,240,240);
}
#construirPerguntas h1 { text-align: center; margin: 0; }
#construirPerguntas{
width: 500px;
height: 500px;
background-color:rgb(240,240,240);
margin-top: 50px;
padding: 5px;
}
#componentes{
display: inline-block;
margin-left:345px;
margin-top:10px;
width: 660px;
height:100px;
box-shadow:1px 1px 2px black;
}
#componentes h1{
text-align: center;
}
.formulario{
border:2px solid black;
box-shadow:1px 1px 5px black;
display:inline-block;
}
.draggable,.botaoSubmit {
display: inline-block;
box-shadow:1px 1px 2px black;
}
.draggable:before,
.draggable:after,
.draggable>:first-child:before,
.draggable>:first-child:after {
position:absolute;
width:10px; height:10px;
border-color:blue;
border-style:solid;
border-radius:12px ;
content: ' ';
}
.draggable:before {top:0;left:0;border-width: 0px 0 0 0px}
.div:after {top:0;right:0;border-width: 4px 4px 0 0}
.draggable>:first-child:before {bottom:0;right:0;border-width: 0 4px 4px 0}
.draggable>:first-child:after {bottom:0;left:0;border-width: 0 0 4px 4px}
.botaoSubmit{
position:relative;
margin-top:360px;
margin-left:600px;
}
form{
width:700px;
height: 410px; }
#dimensao{
margin-left:320px;
margin-top:30px;
height: 900px;
width:900px;
}
.estiloPassarCima{
background-color: #fffa90;
}
</style>
</head>
<body>
<header>
<div id="logo">
<figure>
<img <img src="../imagens/logotipo.png">
</figure>
</div>
<div id="divBusca">
<input type="text" id="txtBusca" placeholder="Buscar..."/>
<button id="btnBusca">Buscar</button>
</div>
</header>
<section>
<header>
<div id="componentes">
<h1>Componentes</h1>
<label >Radio: </label><div class="draggable" class="ui-widget-content" ><input type="Radio" name="radios" disabled="true" value=""> </div>
<label>CheckBox: </label><div class="draggable" class="ui-widget-content"><input type="checkbox" disabled="true"></div>
<label>TextArea:</label><div class="draggable" class="ui-widget-content"> <textarea id="text" disabled="true" name="thiago[]"></textarea></div>
<label>Text Edition:</label><span contenteditable="false" class="draggable" class="ui-widget-content" >text Edition</span>
</div>
</header>
</section>
<section id="dimensao">
<div class="formulario" class="ui-widget-content">
<form>
<div class="botaoSubmit" class="ui-widget-content"><input type="button" id="botao"></div>
</form>
</div>
</section>
<script>
$(function () {
var quantidadePerguntaRadio = 0;
var nomeConjuntoPergunta = 'null';
var valorRadio = 0;
$(".draggable").draggable(
{
helper: "clone"
}
);
$(".draggable").mousedown(
function (e) {
if ($(this).children().prop("type") == "radio") {
while ((quantidadePerguntaRadio == 0 || quantidadePerguntaRadio == 'null')) {
nomeConjuntoPergunta = 'null';
quantidadePerguntaRadio = prompt("Digite a quantidade de Button Radio que usará para está pergunta.");
nomeConjuntoPergunta = prompt("Digite um nome para o conjunto de perguntas?.");
}
valorRadio = prompt("Digite valor para esse campo.");
$(this).children().prop("name", nomeConjuntoPergunta);
quantidadePerguntaRadio--;
}
}
);
$(".botaoSubmit").draggable();
$("form").resizable(
{
animate: true,
containment: "#dimensao"
});
$(".formulario").droppable({
accept: ".draggable",
drop: function (event, ui) {//evento o evento .ui elemento recebido
var new_signature = $(ui.helper).clone();
// var new_signature = $(ui.helper).clone();
new_signature.draggable();//estou dizendo que o clone pode ser arrastado
new_signature.draggable().children().attr('disabled', false);
new_signature.draggable().children().css({"resize": "both"});
$(new_signature.draggable()).mouseup(function (e) {//para excluir ao clicar botao direito
if (e.button === 2) {
$(new_signature).remove();
}
});
if (new_signature.draggable().prop("tagName") === "SPAN") {
new_signature.draggable().attr('contenteditable', 'true');
}
//new_signature.draggable() uso o choldren porque o que esta sendo arrastado é uma div e dentro da divi é que esta o componente input
if ((new_signature.draggable().children().prop("type") === "radio")) {
if (valorRadio != null) {
//new_signature.draggable().prop("value", valorRadio);
new_signature.draggable().append("<span>" + valorRadio + "</span>");
}
valorRadio = null;
}
$(this).append(new_signature);//estou add o elemnto
$(ui.helper).remove();//removendo para não criar clones.
}
});
});
</script>
</body>
Thank you very much for your help.I appreciate it..
– thiago
Good night dvd could help me again. As taken which radio is selected by the user.note that when clicking on the component is requested the amount that will be used. tmb is asked for a name to be used in the attribute (name="Value provided by the user"). I am doing this more successfully. var var_name = $("input[name='radios']:checked"). val();. Here I am considering that ussuario has entered the name radios in the name ,getting name='radios'.
– thiago
I can make a new publication if you prefer
– thiago
@Thiago How are you doing this check? Onclick?
– Sam
I just figured out how to do it. Thank you.
– thiago