插件： React-Grid-Layout，vue-Grid-Layout， Gridster
gridster用法：
<!doctype html>
<html>
<head>
<title>Demo » Grid from serialize » gridster.js</title>
<link rel="stylesheet" href="./assets/less/demo.css">
<link rel="stylesheet" href="../dist/jquery.dsmorse-gridster.min.css">
<script src="../../js/jquery-1.12.4.js"></script>
<script src="../dist/jquery.dsmorse-gridster.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/echarts.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap-table.min.js"></script>
</head>
<body>
<h1>Resize</h1>
<p>Grab the right or bottom border and drag to the desired width or height.</p>
<div class="controls">
<button class="js-resize-random">Resize random widget</button>
</div>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="4" data-sizey="4">
<header>echarts</header>
<div id="main">
</div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
<header>table</header>
<div id="table">
</div>
</li>
<li data-row="1" data-col="4" data-sizex="3" data-sizey="1">2</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
</ul>
</div>
<script type="text/javascript">
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
<script type="text/javascript">
var gridster;
$(function () {
gridster = $(".gridster ul").gridster({ //通过jquery选择DOM实现gridster
// extra_rows: 10,
// extra_cols: 10, //添加行
// min_rows: 5,
// max_cols: 4,
// min_cols: 1,
// max_size_x: false, //模块所占最大列数
avoid_overlapped_widgets: true, //设置为true，不允许模块叠加
widget_base_dimensions: [100, 100], //基础模块的宽高 [宽,高]
// widget_base_dimensions: ['auto', 100], //自适应高度
// autogenerate_stylesheet: true,
widget_margins: [5, 5], //模块的间距 [上下,左右]
helper: 'clone',
resize: {
enabled: true, //默认false，设置为true时表示可以拖动模块的右下角改变模块大小
// axes: ['both'], //设置改变模块大小时，鼠标可以向X轴还是Y轴移动
// handle_class: 'gs-resize-handle', //设置改变模块大小时，拖动按钮的css类名称，默认是gs-resize-handle
// handle_append_to: '', // 通过css选择器设置一个元素，这个元素将是拖动按钮的父元素，如果不设置，默认是这个模块（也就是widget_selector的值）
// max_size: [Infinity, Infinity], // 在改变模块大小的时候，为模块的最大宽高做限制
// start: function(e, ui, $widget) {}, // 鼠标开始拖动大小的时候执行的函数
resize: function (e, ui, $widget) {
console.log('resize', e, ui, $widget)
var ED = echarts.getInstanceByDom($('#main')[0])
ED.resize()
}, //大小一旦改变执行的函数
// stop: function(e, ui, $widget) {}, //鼠标停止调动大小时执行的函数
},
// draggable : {
// handle : 'header' //模块内定义拖动的元素<header>，这里也支持jquery选择器，如"span.drag_handle"
// },
// serialize_params: function($w, wgd) { // 类似gridster.serialize
// console.log('serialize_params',$w, wgd)
// return {
// col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y
// }
// },
// draggable:{
// start: function(event, ui){ //拖动开始执行的函数
// },
// drag: function(event, ui){ //拖动过程中鼠标移动时执行的函数
// },
// stop: function(event, ui){ //拖动结束后执行的函数
// }
// },
// collision: {
// on_overlap_start: function (collider_data) { }, //模块首次进入新网格单元时的回调。
// on_overlap: function (collider_data) { }, //模块在网格单元内移动时的回调。
// on_overlap_stop: function (collider_data) { }, //模块首次离开旧网格单元时的回调。
// }
}).data('gridster');
$('.js-resize-random').on('click', function () {
// console.log(12,gridster.$widgets) // 获取到各个模块
// var s = gridster.serialize(); // 获取到页面各个模块的各个参数 创建一个对象数组，表示网格中所有模块的当前位置
// var s = gridster.serialize(gridster.$widgets.eq(1)); // 参数返回特定的，不加参数返回所有
// var q = gridster.serialize_changed(); // 创建一个对象数组，表示已更改位置的模块的当前位置。使用serialize_params选项中指定的数据返回一个对象数组。
// var q = gridster.serialize_changed(gridster.$widgets.eq(1)); // 所有位置变换的模块
// var q = gridster.enable( ); // 启用拖动
// var q = gridster.disable( ); // 禁用拖动
var q = gridster.add_widget('<li>2994</li>', [3], [1], [1], [1]) // 用给定的html创建一个新的模块并将其添加到网格中。返回表示已调整大小的模块的节点。
// gridster.remove_widget( gridster.$widgets.eq(1), function(){}) // 从网格中移除一个模块。返回Gridster类的实例。
// gridster.resize_widget(gridster.$widgets.eq(2),1, 1,true,function(){}) // 更改模块的大小。宽度限制为当前网格宽度。返回表示已调整大小的模块节点。
console.log('serialize', q)
});
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
}
]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
});
</script>
</body>
</html>
