.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
原始数据
按行查看
历史