Drag and Drop to Inside a Form

by Kyle Mitofsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<!-- FORM START -->
<form class="form-horizontal">
  <fieldset>
    <div class="col-md-6">
      <h3> Preexisting Fields </h3>
      <hr/>

      <!-- First Name -->
      <div id="firstnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
        <label class="col-md-3 control-label" for="textinput">First Name</label>  
        <div class="col-md-9" >
          <input id="textinput" name="textinput" type="text" placeholder="John" class="form-control pull-right">
        </div>
      </div>
      <!-- Last Name -->
      <div id="lastnamedrag" class="form-group" draggable="true" ondragstart="drag(event)">
        <label class="col-md-3 control-label" for="textinput">Last Name</label>  
        <div class="col-md-9" >
          <input id="textinput" name="textinput" type="text" placeholder="Doe" class="form-control input-md">
        </div>
      </div>
    </div>
  </fieldset>
</form>

<!-- INSERT HERE: i want to be able to drag those items above into the panel and create a new form -->
<div id="builder" class="panel panel-default">
  <h3> Drag Fields </h3> <hr/>
  <div class="panel-body" ondrop="drop(event)" ondragover="allowDrop(event)">
    <form id="target" class="form-horizontal">
      <fieldset >
      </fieldset>
    </form>
  </div>
</div>











<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
    About this SO question:
    <a href='http://stackoverflow.com/q/35689061/1366033'>
        Drag and...

JavaScript

function allowDrop(ev) {
  ev.preventDefault();
}
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}