I want to create a drag and drop form builder...

Question

0.00/5 (No votes)

See more:

, +

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:

C#

//components
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
  }
});

//popovers
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:

XML

<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>

        <!-- Building Form. -->

              <!-- Form Name (Complete the coding for database plz)-->
  <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=&quot;input&quot; type='text' name='name' id='name' value ='Form Name' />

    <hr/>
    <button id=&quot;save&quot; class='btn btn-info'>Save</button><button id=&quot;cancel&quot; class='btn btn-danger'>Cancel</button>
  </div>
</form>
" data-title="Form Name" data-trigger="manual" data-html="true">
<!-- Form Name -->
<legend>Form Name</legend>
</div>
</fieldset>
</form>
            </div>
          </div>
        </div>

         <!-- / Building Form. -->
         <!-- Components -->
          <div id="formtabs">
      <h2>Drag &amp; Drop components</h2>
          <hr>
          <div class="tabbable">

              <!-- Tab nav -->
  <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">
                  <!-- Tabs of snippets go here -->
                       <div id="tabs-1">
             <div class="component">
                <!-- Text input-->
   <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">
 <!-- Button Drop Down -->

  <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">
    <!-- Textarea -->
  <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">
    <!-- Multiple Radios -->
     <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">
 <!-- Multiple Radios (inline) -->
 <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">
 <!-- Multiple Checkboxes -->
 <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">
   <!-- Multiple Checkboxes (inline) -->
   <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">
     <!-- Select Basic -->
  <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">
  <!-- Select Multiple -->
  <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>

        <!-- / Components -->

      <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>

   <!-- /container -->


<!-- google analytics.js was here -->






</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?

Posted 26-Jan-15 20:30pm

Hayashi Narumi

Add a Solution

Comments

Sebastiaan Meijerink 19-Apr-15 5:22am

Where is the drag and drop javascript code? What did you try?

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)