Good morning everyone. This is a work I am trying to do. This code creates clones of the componestes, so they can be dragged to a certain location (they can be dragged by clicking on the blue border). But I have a problem getting the values from the TEXTAREA field and the other fields but (if you feel better I can attach to the driver already with the 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>