我想创建一个拖放表单生成器... [英] I want to create a drag and drop form builder...
本文介绍了我想创建一个拖放表单生成器...的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我正在创建一个表单构建器，供用户创建自己的调查等。我希望它能够拖放。
我决定单独创建组件JSP，并且会有popover函数。
这是我的Javascript代码：
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:
//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())
)
}
}
});
});
这是我的FormEditor.jsp代码：
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>
<!-- 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="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">
<!-- Form Name -->
<legend>Form Name</legend>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- / Building Form. -->
<!-- Components -->
<div id="formtabs">
<h2>Drag & 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?
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?
推荐答案
, _, 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.
, _, 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()) ).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())
)
}
}
});
});
el.html( that.template(that.model.getValues()) ) } } }); });
This is my FormEditor.jsp code:
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>
<!-- 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="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">
<!-- Form Name -->
<legend>Form Name</legend>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- / Building Form. -->
<!-- Components -->
<div id="formtabs">
<h2>Drag & 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?
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?
这篇关于我想创建一个拖放表单生成器...的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
