$(function() {
$(".draggable").draggable({
helper: "clone",
revert: "invalid"
});
$(".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();
new_signature.draggable({
revert: "invalid"
}); //estou dizendo que o clone pode ser arrastado
new_signature.draggable().children().attr('disabled', false);
new_signature.draggable().children().css({
"resize": "both"
});
$(this).append(new_signature); //estou add o elemnto
$(ui.helper).remove(); //removendo para não criar clones.
}
})
});
* {
margin: 0px;
border: 0px;
}
body {
background-color: rgb(255, 255, 255);
font-family: 'Gloria Hallelujah', cursive;
}
#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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="componentes">
<label>TextArea:</label>
<div class="draggable" class="ui-widget-content">
<textarea class="aqui" disabled="true" name="arraytextArea[]"></textarea>
</div>
</div>
<section id="dimensao">
<div class="formulario" class="ui-widget-content">
<form>
<div class="botaoSubmit" class="ui-widget-content">
<input type="button" id="botao" value="Botao">
</div>
</form>
</div>
</section>