js clone form html,form_builder.html

H+ 后台主题UI框架 - Bootstrap3 表单构建器

.droppable-active {

background-color: #ffe !important;

}

.tools a {

cursor: pointer;

font-size: 80%;

}

.form-body .col-md-6,

.form-body .col-md-12 {

min-height: 400px;

}

.draggable {

cursor: move;

}

元素

• 选项1
• 选项2

拖拽左侧的表单元素到右侧区域，即可生成相应的HTML代码，表单代码，轻松搞定！

文本框：

说明文字

密码框：

下拉列表：

选项 1

选项 2

选项 3

选项 4

文件域：

纯文本：

这里是纯文字信息

单选框：

选项1

选项2

复选框：

选项1

选项2

选项3

保存内容

取消

拖拽左侧表单元素到此区域

请选择显示的列数：

显示1列

显示2列

复制代码

$(document).ready(function () {

setup_draggable();

$("#n-columns").on("change", function () {

var v = $(this).val();

if (v === "1") {

var $col = $('.form-body .col-md-12').toggle(true);

$('.form-body .col-md-6 .draggable').each(function (i, el) {

$(this).remove().appendTo($col);

})

$('.form-body .col-md-6').toggle(false);

} else {

var $col = $('.form-body .col-md-6').toggle(true);

$(".form-body .col-md-12 .draggable").each(function (i, el) {

$(this).remove().appendTo(i % 2 ? $col[1] : $col[0]);

});

$('.form-body .col-md-12').toggle(false);

}

});

$("#copy-to-clipboard").on("click", function () {

var $copy = $(".form-body").clone().appendTo(document.body);

$copy.find(".tools, :hidden").remove();

$.each(["draggable", "droppable", "sortable", "dropped",

"ui-sortable", "ui-draggable", "ui-droppable", "form-body"], function (i, c) {

$copy.find("." + c).removeClass(c).removeAttr("style");

})

var html = html_beautify($copy.html());

$copy.remove();

$modal = get_modal(html).modal("show");

$modal.find(".btn").remove();

$modal.find(".modal-title").html("复制HTML代码");

$modal.find(":input:first").select().focus();

return false;

})

});

var setup_draggable = function () {

$(".draggable").draggable({

appendTo: "body",

helper: "clone"

});

$(".droppable").droppable({

accept: ".draggable",

helper: "clone",

hoverClass: "droppable-active",

drop: function (event, ui) {

$(".empty-form").remove();

var $orig = $(ui.draggable)

if (!$(ui.draggable).hasClass("dropped")) {

var $el = $orig

.clone()

.addClass("dropped")

.css({

"position": "static",

"left": null,

"right": null

})

.appendTo(this);

// update id

var id = $orig.find(":input").attr("id");

if (id) {

id = id.split("-").slice(0, -1).join("-") + "-" + (parseInt(id.split("-").slice(-1)[0]) + 1)

$orig.find(":input").attr("id", id);

$orig.find("label").attr("for", id);

}

// tools

$('

\

编辑HTML | \

移除

').appendTo($el);

} else {

if ($(this)[0] != $orig.parent()[0]) {

var $el = $orig

.clone()

.css({

"position": "static",

"left": null,

"right": null

})

.appendTo(this);

$orig.remove();

}

}

}

}).sortable();

}

var get_modal = function (content) {

var modal = $('

\

\

\

\

data-dismiss="modal" aria-hidden="true">×

\

编辑HTML

\

\

\

style="min-height: 200px; margin-bottom: 10px;\

font-family: Monaco, Fixed">' + content + '

\

更新HTML\

\

\

\

').appendTo(document.body);

return modal;

};

$(document).on("click", ".edit-link", function (ev) {

var $el = $(this).parent().parent();

var $el_copy = $el.clone();

var $edit_btn = $el_copy.find(".edit-link").parent().remove();

var $modal = get_modal(html_beautify($el_copy.html())).modal("show");

$modal.find(":input:first").focus();

$modal.find(".btn-success").click(function (ev2) {

var html = $modal.find("textarea").val();

if (!html) {

$el.remove();

} else {

$el.html(html);

$edit_btn.appendTo($el);

}

$modal.modal("hide");

return false;

})

});

$(document).on("click", ".remove-link", function (ev) {

$(this).parent().parent().remove();

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史