使用interact.js实现拖拽及碰撞检测功能

需求

可在一个div块中添加多个可拖拽可缩放分区且各分区不可重叠。

实现

1. 实现需要引入interact.js文件进行开发，网上也搜索了挺多，但大多都没有碰撞检测的功能，最后借鉴vue的带有的碰撞检测的组件draggable(新版的，旧版也没有),自己写了一个。

代码如下

html代码如下(项目已经搞完了，截取的拿出来的 大家见谅，缺的地方大家自己补齐吧)：

<style>
    .el-form-item__content {
    
        line-height: 40px;
        position: relative;
        font-size: 1em;
    }

    .cardlayout {
    
        display: inline-block;
        overflow: hidden;
        position: relative;
    }

    .lm-seat-wrap {
    
        position: relative;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }

    .drag-div {
    
        border: 1px dashed #626ed4;
        background-color: #fff;
        width: 200px;
        height: 200px;
    }

    .drag-active-div {
    
        border: 1px solid #d4d9ff;
        background-color: #d4d9ff;
    }

    .handle, .vdr {
    
        position: absolute;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .el-input {
    
        position: relative;
        font-size: 1em;
        display: inline-block;
        width: 100%;
    }

    .el-button--text {
    
        color: #626ED4;
        background: 0 0;
        padding-left: 0;
        padding-right: 0;
    }

    .el-button--text, .el-button--text.is-disabled, .el-button--text.is-disabled:focus, .el-button--text.is-disabled:hover, .el-button--text:active {
    
        border-color: transparent;
    }

    .el-button {
    
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #FFF;
        border: 1px solid #DCDFE6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        -webkit-transition: .1s;
        transition: .1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
    }
	
	<!-- 我的拖拽分区在modal拟态框，解决在拟态框上拖拽异常的问题 -->
    #partitionParentDiv * {
    
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    #partitionParentDiv *:before,
    #partitionParentDiv *:after {
    
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

</style>



<div class="" style="text-align:center;">
                                    <button type="button" class="btn btn-primary drag_l">新增分区</button>
                                    <button type="button" class="btn btn-primary" onclick="delPartition()">删除分区</button>
                                </div>
                                <div style="text-align:center;">
                                	<div id="partitionDiv" class="cardlayout"
                                         style="border: 8px solid rgb(221, 221, 221); border-radius: 8px; margin-top: 10px;">
                                    </div>
                                </div>

js代码如下：

//分区坐标对象
function createPrent(id) {
   
    var parentDiv = {
   
        num: id,
        x: 0,
        y: 0,
        w: 200,
        h: 200
    };
    return parentDiv;
}

//所有分区坐标对象集合
var allparents = new Array();
//当前元素的x与y坐标
var curX = "";
var curY = "";
var curW = "";
var curH = "";
//当前选中分区
var curSelPartition = "";
//分区编号
var partitionNumber = 0;

/***
 * 外层div初始化大小显示
 * @param resolvingPower   div分辨率大小如  	1080.0*1920.0形式
 */
function initConfigPartition(resolvingPower) {
   
            var maxsize = 1000;
            var resolvingPowerArr = resolvingPower.split("*");
            //放置分辨率太大百分去缩放比例
            var scale = maxsize / resolvingPowerArr[0];
            var marginRight = maxsize - resolvingPowerArr[0];
            var marginBottom = (resolvingPowerArr[1] * scale) - resolvingPowerArr[1];
            $("#partitionDiv").append("<div id='partitionParentDiv' class='right lm-seat-wrap' style='transform: scale(" + scale + "); width: " + resolvingPowerArr[0] + "px; height: " + resolvingPowerArr[1] + "px;margin-right: " + marginRight + "px;margin-bottom: " + marginBottom + "px;'></div>");
    }

(function () {
   
    $(function () {
   
    	//添加分区按钮触发
        $('.drag_l').click(function () {
   
            //首次添加
            //分区编号
            partitionNumber++;
            //创建分区对象
            var partition = createPrent(partitionNumber);
            //分区维护集合
            allparents.push(partition);
            //碰撞检测
            if(!checkConflict(partition)){
   
                alert("请留出增加分区的区域")                  
                //将重叠分区进行删除  curSelPartition为当前选中分区
                curSelPartition = partitionNumber;
               
                
                $("#"+partitionNumber).remove();
                removeParent(partitionNumber);
                //初始化当前选中分区的值
                curSelPartition = ""