Apply JQUERY UI Revert Property

Question

I have a problem handling the jquery UI bilbioteca. I have the code in the link below. This code provides the creation of clones from the textarea which are dragged to the field/area just below. I am trying to apply property (revert) so that when the element is dragged out of the droppable/defined area, it returns to it again.

link code

Link to what I want to do

Answer 1

Add the property revert: "invalid" when informing that the clone object can be dragged.

$(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>
<script src="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>