So I'm creating a form builder for users to create their own surveys and such. I want it to be drag and drop.
I decided to create JSP of components individually and there would be popover functions.
This is my Javascript code:
define(function(require) {
var formname = require('snippet/formname.html')
, textinput = require('snippet/textinput.jsp')
, buttondropdown = require('snippet/buttondropdown.jsp')
, multiplecheckboxes = require('snippet/multiplecheckboxes.jsp')
, multiplecheckboxesinline = require('snippet/inlinecheckboxes.jsp')
, multipleradios = require('snippet/multipleradios.jsp')
, multipleradiosinline = require('snippet/inlineradios.jsp')
, selectbasic = require('/snippet/selectbasic.jsp')
, selectmultiple = require('snippet/selectmultiple.jsp')
, textarea = require('snippet/textarea.jsp')
return {
formname : formname
, textinput : textinput
, buttondropdown : buttondropdown
, multiplecheckboxes : multiplecheckboxes
, multiplecheckboxesinline : multiplecheckboxesinline
, multipleradios : multipleradios
, multipleradiosinline : multipleradiosinline
, selectbasic : selectbasic
, selectmultiple : selectmultiple
, textarea : textarea
}
});
define([
"jquery", "underscore", "backbone"
, "js/popover/popover-main.html"
, "js/popover/inputtext.jsp"
, "popover/popover-select.html"
, "popover/popover-textarea.html"
, "popover/popover-textarea-split.html"
, "js/popover/popover-checkbox.html"
, "templates/snippet/snippet-templates"
, "bootstrap"
], function(
$, _, Backbone
, _PopoverMain
, _PopoverInput
, _PopoverSelect
, _PopoverTextArea
, _PopoverTextAreaSplit
, _PopoverCheckbox
, _snippetTemplates
){
return Backbone.View.extend({
tagName: "div"
, className: "component"
, initialize: function(){
this.template = _.template(_snippetTemplates[this.model.idFriendlyTitle()])
this.popoverTemplates = {
"input" : _.template(_PopoverInput)
, "select" : _.template(_PopoverSelect)
, "textarea" : _.template(_PopoverTextArea)
, "textarea-split" : _.template(_PopoverTextAreaSplit)
, "checkbox" : _.template(_PopoverCheckbox)
}
}
, render: function(withAttributes){
var that = this;
var content = _.template(_PopoverMain)({
"title": that.model.get("title"),
"items" : that.model.get("fields"),
"popoverTemplates": that.popoverTemplates
});
if (withAttributes) {
return this.$el.html(
that.template(that.model.getValues())
).attr({
"data-content" : content
, "data-title" : that.model.get("title")
, "data-trigger" : "manual"
, "data-html" : true
});
} else {
return this.$el.html(
that.template(that.model.getValues())
)
}
}
});
});
This is my FormEditor.jsp code:
<head>
<meta charset="utf-8">
<title>Form Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"></link>
<link href="css/customized.css" rel="stylesheet"></link>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
<script type="text/javascript" src="js/Builder2.js"></script>
<div class="span6">
<div class="clearfix">
<h2>Your Form</h2>
<hr>
<div id="build">
<form id="target" class="form-horizontal">
<fieldset><div class="component" data-content="<form class='form'>
<div class='controls'>
<label class='control-label'> Form Name </label>
<input class='input-large field' data-type="input" type='text' name='name' id='name' value ='Form Name' />
<hr/>
<button id="save" class='btn btn-info'>Save</button><button id="cancel" class='btn btn-danger'>Cancel</button>
</div>
</form>
" data-title="Form Name" data-trigger="manual" data-html="true">
<legend>Form Name</legend>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div id="formtabs">
<h2>Drag & Drop components</h2>
<hr>
<div class="tabbable">
<ul id="tabs">
<li><a href="#tabs-1">Input</a></li>
<li><a href="#tabs-2">Radios / Checkboxes</a></li>
<li><a href="#tabs-3">Select</a></li>
<li><a href="#tabs-4">Rendered</a></li>
</ul>
<form class="components" id="components">
<fieldset>
<div class="tab-content">
<div id="tabs-1">
<div class="component">
<div class="control-group">
<label class="control-label" for="textinput">Text Input</label>
<div class="controls">
<input id="textinput" name="textinput" type="text" placeholder="placeholder" class="input-xlarge">
<p class="help-block">help</p>
</div>
</div>
</div>
<div class="component">
<div class="control-group">
<label class="control-label" for="buttondropdown">Button Drop Down</label>
<div class="controls">
<div class="input-append">
<input id="buttondropdown" name="buttondropdown" class="input-xlarge" placeholder="placeholder" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" id="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Option one</a></li>
<li><a href="#">Option two</a></li>
<li><a href="#">Option three</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="component">
<div class="control-group">
<label class="control-label" for="textarea">Text Area</label>
<div class="controls">
<textarea id="textarea" name="textarea">default text</textarea>
</div>
</div>
</div>
</div>
<div id="tabs-2">
<div class="component">
<div class="control-group">
<label class="control-label" for="multipleradios">Multiple Radios</label>
<div class="controls">
<label class="radio" for="multipleradios-0">
<input type="radio" name="multipleradios" id="multipleradios-0" value="Option one" checked="checked">
Option one
</label>
<label class="radio" for="multipleradios-1">
<input type="radio" name="multipleradios" id="multipleradios-1" value="Option two">
Option two
</label>
</div>
</div>
</div>
<div class="component">
<div class="control-group">
<label class="control-label" for="">Inline Radios</label>
<div class="controls">
<label class="radio inline" for="multipleradiosinline-0">
<input type="radio" name="multipleradiosinline" id="multipleradiosinline-0" value="1" checked="checked">
1
</label>
<label class="radio inline" for="multipleradiosinline-1">
<input type="radio" name="multipleradiosinline" id="multipleradiosinline-1" value="2">
2
</label>
<label class="radio inline" for="multipleradiosinline-2">
<input type="radio" name="multipleradiosinline" id="multipleradiosinline-2" value="3">
3
</label>
<label class="radio inline" for="multipleradiosinline-3">
<input type="radio" name="multipleradiosinline" id="multipleradiosinline-3" value="4">
4
</label>
</div>
</div>
</div>
<div class="component">
<div class="control-group">
<label class="control-label" for="">Multiple Checkboxes</label>
<div class="controls">
<label class="checkbox" for="multiplecheckboxes-0">
<input type="checkbox" name="multiplecheckboxes" id="multiplecheckboxes-0" value="Option one">
Option one
</label>
<label class="checkbox" for="multiplecheckboxes-1">
<input type="checkbox" name="multiplecheckboxes" id="multiplecheckboxes-1" value="Option two">
Option two
</label>
</div>
</div>
</div>
<div class="component">
<div class="control-group">
<label class="control-label" for="">Inline Checkboxes</label>
<div class="controls">
<label class="checkbox inline" for="multiplecheckboxesinline-0">
<input type="checkbox" name="multiplecheckboxesinline" id="multiplecheckboxesinline-0" value="1">
1
</label>
<label class="checkbox inline" for="multiplecheckboxesinline-1">
<input type="checkbox" name="multiplecheckboxesinline" id="multiplecheckboxesinline-1" value="2">
2
</label>
<label class="checkbox inline" for="multiplecheckboxesinline-2">
<input type="checkbox" name="multiplecheckboxesinline" id="multiplecheckboxesinline-2" value="3">
3
</label>
<label class="checkbox inline" for="multiplecheckboxesinline-3">
<input type="checkbox" name="multiplecheckboxesinline" id="multiplecheckboxesinline-3" value="4">
4
</label>
</div>
</div>
</div>
</div>
<div id="tabs-3">
<div class="component">
<div class="control-group">
<label class="control-label" for="selectbasic">Select Basic</label>
<div class="controls">
<select id="selectbasic" name="selectbasic" class="input-xlarge">
<option>Option one</option>
<option>Option two</option>
</select>
</div>
</div>
</div>
<div class="component">
<div class="control-group">
<label class="control-label" for="selectmultiple">Select Multiple</label>
<div class="controls">
<select id="selectmultiple" name="selectmultiple" class="input-xlarge" multiple="multiple">
<option>Option one</option>
<option>Option two</option>
</select>
</div>
</div>
</div>
</div>
<div id="tabs-4">
<h3>Rendered source of your form:</h3>
<textarea id="render" class="span6"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row clearfix">
<div class="span12">
<hr>
By Adam Moore (<a href="http://twitter.com/minikomi">@minikomi</a>).<br>
Source on (<a href="https://github.com/minikomi/Bootstrap-Form-Builder">Github</a>).
</div>
</div>
</body>
</html>
I thought of using the JQuery UI drag and drop function but I've tried. My coding just don't seem to be logical. I need to know how to code the drag and drop function in regard to my components.
So my question is, how do I implement this JQuery drag and drop to my components?