JSFiddle - React, Tailwind, and code Playground

by thiago xavier

HTML

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">    
    
</head>
<body>


<header>
    <div id="logo">

        <figure>

         
        </figure>

    </div>

    <div id="divBusca">

        <input type="text" id="txtBusca" placeholder="Buscar..."/>
        <button id="btnBusca">Buscar</button>
    </div>


</header>



<section>


    <header>



        <div id="componentes">
            <label>TextArea:</label><div  class="draggable" class="ui-widget-content"> <textarea class="aqui"  disabled="true" name="arraytextArea[]"></textarea></div>


        </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" value="Botao"></div>
        </form>


    </div>


</section>

</body>>
</html>

CSS

*{
            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;
       ...

JavaScript

$(function () {









$(".draggable").draggable(
{

helper: "clone"


}
);



$(".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();//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.

}
})



});