Bom dia Pessoal. Este é um trabalho que estou tentando fazer.Este código cria clones dos componestes, que assim podem ser arrastados até determinado local(Podem ser arrastado clicando na borda azul).Mas tenho um problema para pegar os valor do campo TEXTAREA e dos outros campos mas se auguem conseguir o do text área eu consigo fazer o resto.(Se acharem melhor posso anexar no Google driver ja com as bibliotecas)
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>