创建信息表html,创建表单.html

.bg-purple {

background: #d3dce6;

}

.bg-purple-light {

background: #e5e9f2;

}

.grid-content {

border-radius: 4px;

min-height: 636px;

padding:20px;

}

.item{

height: 60px;

border:0px solid #333;

/*border-radius: 4px;

border-style: dashed;*/

padding: 10px;

margin-bottom: 5px;

cursor: pointer;

}

.moveStyle{

border:1px solid #999;

border-radius: 4px;

background: #eee;

}

#removeBox{

height: 100px;

width: 100px;

border:2px dashed #999;

background: rgba(0,0,0,0,3);

position: absolute;

bottom: 10px;

right: 20px;

background: url(deleteBox.png) no-repeat;

background-size: 90%;

background-position: center center;

}

#showCode{

position: absolute;

left: 20px;

bottom: 10px;

}

.flxed{

position: relative;

top: 0;

left: 0;

}

输入框

复选框

1

2

3

单选框

1

2

3

下拉列表

1

2

3

4

5

按钮

(一般信息)Info

按钮

(成功)Success

按钮

(危险)Danger

按钮组

(成功)Success

(危险)Danger

文本域

查看源码

×

修改名称

关闭

保存修改

integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="

crossorigin="anonymous">

$(function(){

//修改label的值

$(document).on('dblclick','#box label',function(){

$('#myModal').modal('show');

$("#input").val("");

var randId = parseInt(Math.random() * (1000000 - 1 + 1) + 1);

$(this).attr("id",randId);

$("#save").attr("saveId",randId);

console.log("id",randId);

})

//修改label的值

$(document).on('dblclick','#box button',function(){

$('#myModal').modal('show');

$("#input").val("");

var randId = parseInt(Math.random() * (1000000 - 1 + 1) + 1);

$(this).attr("id",randId);

$("#save").attr("saveId",randId);

console.log("id",randId);

})

//保存input框的值

$("#save").click(function(){

$('#myModal').modal('hide');

var value = $("#input").val();

var id = $(this).attr("saveId");

$("#"+id).text(value);

})

//开始拖动

$(".item").on("dragstart",function(e){

console.log("SET -> addBuffer",e.target.id);

e.originalEvent.dataTransfer.setData("addBuffer",e.target.id);

e.originalEvent.dataTransfer.effectAllowed = 'all';

e.originalEvent.dataTransfer.dropEffect = 'all';

e.originalEvent.dataTransfer.setDragImage(this,0,0);

$("#"+e.target.id).addClass("moveStyle");

});

$("#box").on("dragover",function(e){

e.originalEvent.preventDefault();

})

$("#removeBox").on("dragover",function(e){

e.originalEvent.preventDefault();

})

//放下事件

$("#box").on("drop",function(e){

var id = e.originalEvent.dataTransfer.getData("addBuffer");

$("#"+id).removeClass("moveStyle");

var item = "item"+parseInt(Math.random() * (1000000 - 1 + 1) + 1);

//$("#"+id).attr("id",item);

console.log("GET-> addBuffer:",item);

$(this).append($("#"+id).clone().attr("id",item));

//给新加入的元素添加拖放事件

$("#"+item).on("dragstart",function(e){

e.originalEvent.dataTransfer.setData("removeBuffer",e.target.id);

console.log("TO -> removeBuffer",e.target.id);

});

})

$("#removeBox").on("drop",function(e){

e.originalEvent.preventDefault;

var r = e.originalEvent.dataTransfer.getData("removeBuffer");

/*console.log(r);*/

if(r == null || r == ''){

alert('error!');

return;

}

$("#"+r).remove();

}) ;

$("#showCode").click(function(){

$("#codeBox").text("");

var code = $("#box").clone().html();

if(code == null || code == ''){

alert("请先选择控件！");

return ;

}

$("#codeBox").text(code);

})

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史