I'm trying to make a customizable form builder where you can drag and drop the Bootstrap fields into a box in order to make another form. I'm fairly new to html/css/js so anything would be greatly appreciated!
Here's what I have so far:
<!-- language: lang-html --><!-- 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>
JavaScript:
<!-- language: lang-js -->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));
}
