Javascript 有没有办法将多个div合并为一个div

我有一个n乘m div的动态组来形成一个网格。可以选择此网格中的项目。我希望达到的最终结果是能够合并和拆分选定的div

我已经设法让div正确显示并选择它们，并将它们的id存储在一个列表中。有没有一种方法可以将选定的div组合在一起，使其周围的div保持原位

@(Html.Kendo().Window()
.Name("window") //The name of the window is mandatory. It specifies the "id" attribute of the widget.
.Title("Dashboard Setup") //set the title of the window
.Content(@<text>
    <div id="divSetup">
        <div class="dvheader">
            <b>Dashboard Setup</b>
        </div>
        <div>
            <p>Enter the number of columns and rows of dashboard elements. This will create an empty dashboard with a set number of items which can be filled with KPI charts.</p>
            <br />
            <div class="dvform">
                <table>
                    <tr style="margin-bottom: 15px;">
                        <td>
                            @Html.Label("Number of Columns: ")

                        </td>
                        <td>
                            <input type="number" name="NumColumns" id="NoColumns" min="1" max="20" />
                        </td>
                    </tr>
                    <tr style="margin-bottom: 15px;">
                        <td>
                            @Html.Label("Number of Rows: ")

                        </td>
                        <td>
                            <input type="number" name="NumRows" id="NoRows" min="1" max="20" />
                        </td>
                    </tr>
                </table>
            </div>

        </div>
        <div style="float: right">
            <button id="btnSave" class="k-primary">Save</button>
            <button id="btnClose">Close</button>
        </div>
    </div>
    </text>)
    .Draggable() //Enable dragging of the window
    .Resizable() //Enable resizing of the window
    .Width(600) //Set width of the window
    .Modal(true)
    .Visible(false)
)

    <div id="dashboard">
    </div>

    <button id="combine" title="Combine">Combine</button>

 <script>
 $(document).ready(function () {
    debugger;

    $("#window").data("kendoWindow").open();

    $("#btnClose").kendoButton({
        click: close
    });

    $("#btnSave").kendoButton({
        click: Save
    });
    $("#combine").kendoButton();
});

var array = [];
function clicked(e)
{
    debugger;
    var selectedDiv = "";

    var x = document.getElementsByClassName('column')
    for (var i = 0; i < x.length; i++)
    {
        if (x[i].id == e.id)
        {
            x[i].classList.add("selected");
            array.push(x[i]);
        }
    }

    for (var x = 0; x < array.length - 1; x++) {
        array[x].classList.add("selected");
    }

}

function close() {
    $("#window").hide();
}

function Save()
{
    debugger;
    var col = document.getElementById("NoColumns").value;
    var row = document.getElementById("NoRows").value;

    for (var x = 1; x <= row; x++)
    {
        debugger;
        document.getElementById("dashboard").innerHTML += '<div class="row">';
        debugger;
        for (var i = 1; i <= col; i++)
        {
            document.getElementById("dashboard").innerHTML += '<div onclick="clicked(this)" id="Row ' + x + ' Col ' + i + '" class="column">' + i + '</div>';
        }

        document.getElementById("dashboard").innerHTML += '</div>';
    }

}

@（Html.Kendo（）.Window（））
.Name（“窗口”）//窗口的名称是必需的。它指定小部件的“id”属性。
.Title（“仪表板设置”）//设置窗口的标题
.内容(@
仪表板设置
输入仪表板元素的列数和行数。这将创建一个空仪表板，其中包含一组可以用KPI图表填充的项目



@Label（“列数：”）
@Label（“行数：”）
拯救
关
)
.Draggable（）//启用窗口的拖动
.resizeable（）//启用窗口的大小调整
.Width（600）//设置窗口的宽度
.模态（真）
.可见（假）
)
结合
$（文档）.ready（函数（）{
调试器；
$（“#窗口”）.data（“kendoWindow”）.open（）；
$（“#btnClose”）。肯多布顿({
单击：关闭
});
$（“#btnSave”）。肯多布顿({
单击：保存
});
$（“#combine”）.kendoButton（）；
});
var数组=[]；
函数（e）
{
调试器；
var selectedDiv=“”；
var x=document.getElementsByClassName（'列'）
对于（变量i=0；i对于（var x=1；x如果您使用的是一个表，那么它会容易得多；对于div，我可以想出一个解决方案，如果样式位置是绝对的，那么它至少可以帮助您开始

<div id="container"></div>
<button id="combine" title="Combine" disabled="disabled">Combine</button>
<div id="output"></div>

如果未选择正确的组（矩形形状选择），则组合按钮将不会激活

拆分也不难，但我没有时间将其组合在一起，如果此解决方案有帮助，我可以为拆分更新它

注意：我写得很快，所以没有优化

要尝试此解决方案，请使用：
太棒了！！非常感谢！！这正是我想要的。优化代码很容易，但它的工作原理与我预期的完全一样
<div id="container"></div>
<button id="combine" title="Combine" disabled="disabled">Combine</button>
<div id="output"></div>

<script>
var cc;
    function group() {

        var xx = $(".selected").map(function () { return $(this).attr("data-x"); }).get();
        var yy = $(".selected").map(function () { return $(this).attr("data-y"); }).get();

        this.minX = Math.min.apply(Math, xx);
        this.minY = Math.min.apply(Math, yy);
        this.maxX = Math.max.apply(Math, xx);
        this.maxY = Math.max.apply(Math, yy);
        this.selectedCount = $(".selected").length;

        this.CorrectGroup = function () {
            var s = this.selectedCount;
            return s == this.cellsCount() && s > 1;
        }

        this.width = function () {
            return this.maxX - this.minX + 1;
        }
        this.height = function () {
            return this.maxY - this.minY + 1;
        }
        this.cellsCount = function () {
            return this.width() * this.height();
        }

    }
    function cell(x, y, g) {
        this.x = x;
        this.y = y;
        this.g = g;
        this.spanX = 1;
        this.spanY = 1;
        this.visible = true;
        var cellWidth = 80;
        var cellHeight = 50;


        this.div = function () {
            var output = jQuery('<div/>');
            output.attr('id', 'y' + y + 'x' + x);
            output.attr('data-x', x);
            output.attr('data-y', y);
            output.attr('style', this.left() + this.top() + this.width() + this.height());
            output.addClass('clickable');

            output.html('(y=' + y + ' x=' + x + ')')
            return output;
        }
        this.left = function () {
            return 'left:' + (x * cellWidth) + 'px;';
        }
        this.top = function () {
           return  'top:' + (100 + y * cellHeight) + 'px;';
        }
        this.width = function () {
            return 'width:' + (this.spanX * cellWidth) + 'px;';
        }
        this.height = function () {
            return 'height:' + (this.spanY * cellHeight) + 'px;';
        }
    }

    function cells(xx, yy) {

        this.CellWidth = xx;
        this.CellHeight = yy;
        this.CellList = [];

        for (var y = 0; y < yy; y++)
            for (var x = 0; x < xx; x++) {
                this.CellList.push(new cell(x, y, 1));
            }


        this.findCell = function (xx, yy) {
            return this.CellList.find(function (element) {
                return (element.x == xx && element.y == yy);
            });
        }

        this.displayCells = function (container) {
            container.html('');
            for (var y = 0; y < yy; y++)
                for (var x = 0; x < xx; x++) {
                    var cell = this.findCell(x, y);
                    if (cell.visible)
                        cell.div().appendTo(container);
                }
        }
    }

    $(document).ready(function () {
        $('#combine').click(function () {

            $(".selected").each(function () {
                var x = $(this).data('x');
                var y = $(this).data('y');
                var cell = cc.findCell(x, y);

                cell.visible = false;
                cell.g = 'y';
            });

            var first = $(".selected").first();
            var xx = $(first).data('x');
            var yy = $(first).data('y');

            var cell = cc.findCell(xx, yy);
            var g = new group();
            cell.visible = true;
            cell.g = xx + '_' + yy;
            cell.spanX = g.width();
            cell.spanY = g.height();

            cc.displayCells($('#container'));

        });
        //make divs clickable
        $('#container').on('click', 'div', function () {
            $(this).toggleClass('selected');

            if (CheckIfSelectedAreGroupable())
                $('#combine').removeAttr("disabled");
            else
                $('#combine').attr("disabled", "disabled");
        });

        cc = new cells(12, 10);
        cc.displayCells($('#container'));
    });
    function CheckIfSelectedAreGroupable() {
        var g = new group();
        return g.CorrectGroup();
    }


   </script>

<style>

    .selected {
        background-color: #226fa3 !important;
        transition: background-color 0.4s ease-in, border-color 0.4s ease-in;
        color: #ffffff;
    }

    .clickable {
        border: 1px solid lightgray;
        margin: 0px;
        padding: 0px;
        background-color: lightyellow;
        position: absolute;
    }

</style>

cc = new cells(12, 10);