bootstrap动态网格拖拽组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> bootstrap动态网格拖拽组件 - www.bootstrapmb.com</title>
<link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
<link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.5.81.all.css">
<link rel="stylesheet" href="https://www.jq22.com/demo/bootstraptzbj202212252305/style.css">
</head>
<body style="width: 70%">
<!-- partial:index.partial.html -->
<div class="col-sm-12 form-group">
</div>
<div class="col-sm-12">
<div class="row">
<div class="grid-settings">
<div class="form-check display-inline view-gridlines-div">
<label class="view-gridlines-label">显示网格线?</label>
<div class="toggle">
<input type="checkbox" id="toggle1" class="togglegridlines" checked>
<label for="toggle1"></label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="zone_div">
<div class="flexgrid-container" style="width: 500px;">
<div class="flexgrid-helper">
<div class="add-row"></div>
<div class="remove-row"></div>
<button class="btn btn-sm clear-flexgrid">删除</button>
<button class="btn btn-sm fg-add-widget">添加</button>
<button class="btn btn-sm save-flexgrid"><i class="fas fa-save"></i></button>
</div>
<div class="flexgrid-grid"></div>
</div>
</div>
</div>
</div>
</div>
<label class="widget-holder-label">小部件:</label>
<div class="widget-holder">
<div class="fg-widget custom-widget"><i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i><i class="fa fa-times fg-remove-widget" title="remove this widget"></i><i class="fas fa-arrows-alt move-widget fg-widget-handle"></i><div class="fg-widget-inner"><i class="fas fa-ad inner-icon"></i></div></div>
<div class="fg-widget custom-widget"><i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i><i class="fa fa-times fg-remove-widget" title="remove this widget"></i><i class="fas fa-arrows-alt move-widget fg-widget-handle"></i><div class="fg-widget-inner"><i class="fas fa-ad inner-icon"></i></div></div>
<div class="fg-widget custom-widget"><i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i><i class="fa fa-times fg-remove-widget" title="remove this widget"></i><i class="fas fa-arrows-alt move-widget fg-widget-handle"></i><div class="fg-widget-inner"><i class="fas fa-ad inner-icon"></i></div></div>
<div class="fg-widget custom-widget"><i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i><i class="fa fa-times fg-remove-widget" title="remove this widget"></i><i class="fas fa-arrows-alt move-widget fg-widget-handle"></i><div class="fg-widget-inner"><i class="fas fa-ad inner-icon"></i></div></div>
<div class="fg-widget custom-widget"><i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i><i class="fa fa-times fg-remove-widget" title="remove this widget"></i><i class="fas fa-arrows-alt move-widget fg-widget-handle"></i><div class="fg-widget-inner"><i class="fas fa-ad inner-icon"></i></div></div>
<div class="fg-widget custom-widget"><i class="fa fa-chevron-right fg-resize-widget" aria-hidden="true"></i><i class="fa fa-times fg-remove-widget" title="remove this widget"></i><i class="fas fa-arrows-alt move-widget fg-widget-handle"></i><div class="fg-widget-inner"><i class="fas fa-ad inner-icon"></i></div></div>
</div>
<label class="nested-holder-label">嵌套小部件</label>
<div class="nested-holder">
<div class="nested-widget cloner">
<div class="nested-widget-inner">
<div class="remove-nested-widget"><i class="fas fa-times"></i></div>
<div class="nested-widget-txt">cloner</div>
</div>
</div>
<div class="nested-widget" data-cs-height="300">
<div class="nested-widget-inner">
<div class="remove-nested-widget"><i class="fas fa-times"></i></div>
<div class="nested-widget-txt">1</div>
</div>
</div>
<div class="nested-widget" data-cs-height="400">
<div class="nested-widget-inner">
<div class="remove-nested-widget"><i class="fas fa-times"></i></div>
<div class="nested-widget-txt">2</div>
</div>
</div>
<div class="nested-widget">
<div class="nested-widget-inner">
<div class="remove-nested-widget"><i class="fas fa-times"></i></div>
<div class="nested-widget-txt">3</div>
</div>
</div>
<div class="nested-widget">
<div class="nested-widget-inner">
<div class="remove-nested-widget"><i class="fas fa-times"></i></div>
<div class="nested-widget-txt">4</div>
</div>
</div>
</div>
<!-- partial -->
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
<script src='jquery.ui.touch-punch.min.js'></script>
<script src="https://www.jq22.com/demo/bootstraptzbj202212252305/script.js"></script>
</body>
</html>
页:
[1]