<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
.lay-screen-body{
}
.lay-screen-table,
.lay-screen-table tr,
.lay-screen-table{
padding: 0;
margin: 0;
}
.lay-screen-table{
border: 0;
width: 100%;
}
.lay-screen-table tr{
width: 100%;
}
.lay-screen-table td{
width: 29rem;
height: 10rem;
border: 1px solid #0c30af;
border-radius: 5px;
}
.lay-screen-hide{
display: none;
}
.tuodong {
width: 100px;
height: 50px;
background: dodgerblue;
margin: 15px;
cursor: pointer;
border-radius: 5px;
font-size: 14px;
line-height: 50px;
text-align: center;
color: #fff;
display: inline-block;
}
</style>
<body>
<div class="lay-screen-body">
<table class="lay-screen-table">
<tr>
<td class="lay-lie-1 lay-row-1" lay-lie="1" lay-row="1" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)"></td>
<td class="lay-lie-2 lay-row-1" lay-lie="2" lay-row="1" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)"></td>
<td class="lay-lie-3 lay-row-1" lay-lie="3" lay-row="1" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)"></td>
<td class="lay-lie-4 lay-row-1" lay-lie="4" lay-row="1" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)"></td>
</tr>
<!-- 多余隐藏：lay-screen-hide -->
<!-- 合并同行的：colspan="2" -->
<!-- 合并下面的：rowspan="2" -->
<tr>
<td class="lay-lie-1 lay-row-2" lay-lie="1" lay-row="2" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)"></td>
<td class="lay-lie-2 lay-row-2" lay-lie="2" lay-row="2" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)"></td>
<td class="lay-lie-3 lay-row-2" lay-lie="3" lay-row="2" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)"></td>
<td class="lay-lie-4 lay-row-2" lay-lie="4" lay-row="2" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)"></td>
</tr>
<tr>
<td class="lay-lie-1 lay-row-3" lay-lie="1" lay-row="3" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)"></td>
<td class="lay-lie-2 lay-row-3" lay-lie="2" lay-row="3" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)"></td>
<td class="lay-lie-3 lay-row-3" lay-lie="3" lay-row="3" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)"></td>
<td class="lay-lie-4 lay-row-3" lay-lie="4" lay-row="3" ondrop="handleDrag(event, this)" ondragover="handleDragover(event, this)" ondragleave="handleDragleave(event, this)"></td>
</tr>
<!-- 如若需要添加或减少，添加标签和修改下面的 layTable 对象数值即可-->
</table>
</div>
<div style="padding: 10px;">
<h2>拖动元素</h2>
<span class="tuodong" lay-w="1" lay-h="1" lay-id="101"
draggable="true" ondragend="dragEnd(event, this)" ondragstart="dragStart(event, this)">
我是 宽1 * 高1
</span>
<span class="tuodong" lay-w="1" lay-h="2" lay-id="102" style="height: 100px;"
draggable="true" ondragend="dragEnd(event, this)" ondragstart="dragStart(event, this)">
我是 宽1 * 高2
</span>
<span class="tuodong" lay-w="1" lay-h="3" lay-id="103" style="height: 200px;"
draggable="true" ondragend="dragEnd(event, this)" ondragstart="dragStart(event, this)">
我是 宽1 * 高3
</span>
<span class="tuodong" lay-w="2" lay-h="2" lay-id="112" style="height: 120px;width: 120px;"
draggable="true" ondragend="dragEnd(event, this)" ondragstart="dragStart(event, this)">
我是 宽2 * 高2
</span>
<span class="tuodong" lay-w="2" lay-h="3" lay-id="113" style="height: 150px;width: 120px;"
draggable="true" ondragend="dragEnd(event, this)" ondragstart="dragStart(event, this)">
我是 宽2 * 高3
</span>
<span class="tuodong" lay-w="3" lay-h="3" lay-id="114" style="height: 200px;width: 200px;"
draggable="true" ondragend="dragEnd(event, this)" ondragstart="dragStart(event, this)">
我是 宽3 * 高3
</span>
<span class="tuodong" lay-w="4" lay-h="3" lay-id="115" style="height: 200px;width: 300px;"
draggable="true" ondragend="dragEnd(event, this)" ondragstart="dragStart(event, this)">
我是 宽4 * 高3
</span>
<span class="tuodong" lay-w="3" lay-h="2" lay-id="116" style="height: 150px;width: 200px;"
draggable="true" ondragend="dragEnd(event, this)" ondragstart="dragStart(event, this)">
我是 宽3 * 高2
</span>
<span class="tuodong" lay-w="2" lay-h="1" lay-id="104" style="width: 200px;"
draggable="true" ondragend="dragEnd(event, this)" ondragstart="dragStart(event, this)">
我是 宽2 * 高1
</span>
<span class="tuodong" lay-w="3" lay-h="1" lay-id="105" style="width: 300px;"
draggable="true" ondragend="dragEnd(event, this)" ondragstart="dragStart(event, this)">
我是 宽3 * 高1
</span>
<span class="tuodong" lay-w="4" lay-h="1" lay-id="106" style="width: 400px;"
draggable="true" ondragend="dragEnd(event, this)" ondragstart="dragStart(event, this)">
我是 宽4 * 高1
</span>
</div>
<div style="padding: 10px;">
<h2>提交数据</h2>
<span class="tuodong" onclick="submitData()" style="background: #19c54d;">提交数据</span>
<div>
<textarea id="content" placeholder="获取的提交数据..." style="width: 500px;height: 200px;"></textarea>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script>
/**
* 2023-09-18
* @author yyq
*/
var layTable = {
width: 29, // 每个td的rem宽度
height: 10, // 每个td的rem高度
row: 3, // 共多少行
lie: 4, // 共多少列
};
var last_td = {}; // 最后拖动的元素参数
var submit_data = {}; // 需要提交的id
function dragStart(event, _serf) {
console.log(event.target.id)
console.log("拖动")
$('.lay-screen-table td').css('background', '#4080e1')
var w = $(_serf).attr('lay-w'); // 数据合并宽
var h = $(_serf).attr('lay-h'); // 数据合并高
var id = $(_serf).attr('lay-id'); // 数据ID
var temp_id = new Date().getTime(); // 用于标识/删除标签
last_td = {w_num: w, h_num: h, id: id, temp_id: temp_id};
}
function dragEnd(event, _serf) {
console.log("松开")
$('.lay-screen-table td').css('background', '#1c53a900')
}
function handleDrag(event, _serf) {
console.log("你贴我脸上了", event.target.id);
var w_num = last_td.w_num;
var h_num = last_td.h_num;
var lie = $(_serf).attr('lay-lie');
var row = $(_serf).attr('lay-row');
var tempId = $(_serf).attr('lay-temp-id');
var temp_lie = layTable.lie - (lie-1);
var temp_row = layTable.row - (row-1);
if(temp_row < h_num){
return console.log("无法合并，剩余行：", temp_row, ' 需要行：', h_num);
}
if(temp_lie < w_num){
return console.log("无法合并，剩余列：", temp_lie, ' 需要列：', w_num);
}
// 清除贴在上面的填充盒子
$("td[lay-temp-id='"+tempId+"']").removeClass('lay-screen-hide');
$("td[lay-temp-id='"+tempId+"']").removeAttr('colspan');
$("td[lay-temp-id='"+tempId+"']").removeAttr('rowspan');
$("td[lay-temp-id='"+
