使用 jQuery UI 创建 resizable，draggable 仪表盘
程序员文章站
2022-05-12 12:31:18
...
网络上有非常多的开源 Dashboard 解决方案，如：15 种构建 Dashboard 的开源解决方案
还有一些 grid 框架，可用于定制自己的 Dashboard，例如 gridster，react-grid-layout 等等。
但是这些方案都有个共同的问题，就是太复杂，有一定的学习和系统集成的成本，不适合演示性的小工具面板开发。如果你只想花几个小时的时间，来实现一个能够拖拽和缩放的面板，那么本文应该会有些帮助。
1、jQuery UI
下载资源： : jquery-ui.js, jquery-ui.css.js
接口文档：
widget 简单示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<style>
.ui-widget-content {
border: 1px solid #dddddd;
background: #ffffff;
color: #333333;
}
.ui-resizable {
position: relative;
}
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="jquery-3.4.1.min.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( function() {
$("#draggable").resizable({
autoHide: true,
alsoResize: "#mirror",
grid: [10,10],
});
$("#draggable").draggable();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content ui-resizable ui-draggable ui-draggable-handle ui-resizable-autohide" style="position:absolute;width:400px;height:300px;">
<h3 class="ui-widget-header" >Resizable</h3>
<p>Drag me around</p>
</div>
</body>
</html>
以上页面中的 draggable 组件可以*的拖拽和伸缩。
2、Dashboard 示例
下面使用 echarts 中的图表作为示例，可创建如下效果的 dashboard，这个 dashboard 的逻辑都非常的简单，使用起来也比较流畅。
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<style>
.ui-widget-content {
border: 1px solid #dddddd;
background: #ffffff;
color: #333333;
}
.ui-resizable {
position: relative;
}
</style>
<script src="./jquery-3.4.1.min.js""></script>
<script src="./jquery-ui.js"></script>
<script src="./echarts.js"></script>
<script>
let option1 = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
function Grid(id){
this.id = id;
this.container = $("#"+id);
this.widgets = {};
this.factory = {
echart: function(id, option){
let widget = {
id: id,
el: $("#"+id),
resize: function(){
this.chart.resize();
}
};
$(()=>{
widget.el.resizable({
autoHide: true,
alsoResize: "#mirror",
grid: [10,10],
stop: (event, ui) =>{
widget.resize();
}
});
widget.el.draggable();
});
widget.chart = echarts.init(document.getElementById(id + "-content"));
widget.chart.setOption(option);
},
table: function(id, option){
},
value: function(id, option){
}
};
}
let fn = Grid.prototype;
fn.addWidget = function(id, style){
this.container.append(`
<div id="${id}" class="ui-widget-content ui-resizable" style="${style}">
<div id="${id}-content" style="width:100%;height:98%"></div>
</div>`);
this.widgets[id] = this.factory["echart"](id, option1);
}
fn.removeWidget = function(id){
this.widgets[id].el.remove();
delete this.widgets[id];
}
fn.dump = function(){
let result = [];
for(let w in this.widgets){
result.push({
id: w.el.attr("id"),
style: w.el.attr("style")
});
}
return result;
}
fn.clearAll = function(){
this.container.empty();
}
window.onload = function(){
window.grid = new Grid("container");
let items = [
{"id":"resizable1","style":"position:absolute;width:400px;height:300px;"},
{"id":"1580959870136","style":"position: absolute; width: 200px; height: 200px; top: 79px; left: 406px;"},
{"id":"1580959872428","style":"position: absolute; width: 200px; height: 200px; top: 249px; left: 149px;"},
{"id":"1580959879629","style":"position: absolute; width: 200px; height: 200px; top: 92px; left: 751px;"}
];
items.forEach(v => {
grid.addWidget(v.id, v.style);
})
}
</script>
</head>
<body style="cursor: auto;">
<div style="margin:10%;width:1000px; height:600px; background-color: rgba(158, 191, 220, 0.1);">
<div id="container" style="position:absolute">
</div>
</div>
</body>
</html>