drag/drop into textarea

Drag and drop elements into a text area, where they bubble.

by Gabriel Rodrigues

HTML

<div class="droppable">
  <div id="names"></div>
  <textarea style="width: 100%; height: 70%" class="notes"></textarea>
</div>


<ul style="float: left">
  <li>Macros</li>
  <li class="draggable">[CODIGO_CLIENTE]</li>
  <li class="draggable">[NOME_CLIENTE]</li>
</ul>

CSS

body {
  font-family: helvetica, arial, sans-serif;
  font-size: small;
}

.droppable {
  width: 300px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
  background: #daeff4;
  white-space: pre-wrap;
}

.draggable {
  padding: 0.5em;
  float: left;
  margin: 10px 10px 0 0;
  border: solid 1px #454545;
  background: white;
  white-space: nowrap;
}

draggable:hover {
  cursor: pointer;
}

.draggable_off {
  color: #bcbcbc;
  border: 1px solid #bcbcbc;
  background: #ededed;
}

.dragging {
  background: green;
}

.notes {
  background: none;
  margin-top: 0;
  border: none;
  resize: none;
}

.name {
  background: white;
  border: 1px solid #cdcdcd;
  font-family: helvetica, arial, sans-serif;
  color: #437182;
  padding: 3px;
  margin: 3px;
  white-space: nowrap;
  float: left;
}

JavaScript

$(function() {
  $(".draggable").draggable({
    helper: 'clone',
    cursor: 'pointer',
    start: function(ui) {
      $(ui.helper).addClass("dragging");
    }
  });

  $(".droppable").droppable({
    accept: ".draggable",
    drop: function(event, ui) {
      var div = "<div class = 'name'>" + $(ui.draggable).html() + "</div>";
      $(this)
        .find("#names")
        .append(div);
      $(ui.draggable)
        .addClass("draggable_off")
        .draggable("disable");

    }
  });

});