div拖拽变宽需求的实现

div拖拽变宽需求的实现

页面描述：左边框体为树，右边框体随着左边树节点的点击出现不同的内容
需求：由于树有多级结点，且内容较长，需要左框体可以实现拖拽变宽
难点：由于右边窗口会随着左边的树节点的点击而新增frame，导致页面的鼠标抬起事件无法传播到新增的frame，使的页面效果出现偏差
解决方案：
在新增的frame中添加鼠标抬起事件，并向主窗口发送消息
主窗口接收到消息后，自动执行原本的鼠标抬起事件。

消息传递的代码参见：

https://www.cnblogs.com/ms-grf/p/11545290.html

关于鼠标的clientX参数参见：

https://www.cnblogs.com/ytraister/p/10959867.html

主框体-框架：

<!--左框体-->
<div class="div_left"" id="widthAuto">
	<!--树-->
     <div class="treepanel">
        <ul id="treeDemo1" class="ztree"></ul>
    </div>
</div>
<!--右框体-->
<div class="div_right">
    <!--显示可拖拽样式的滑块-->
    <div id="handle"></div>
    <!--随着树结点的点击，append一个<frame>元素进去-->	
    <div  id="mainFrame"></div>
</div>

主框体-样式：

#mainFrame{
	margin-left:15px;
	position:relative;
	display:inline;	
}
#handle {
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: w-resize; 
    padding: 2px 2px;
    height: 100%;
}

主框体-js代码：

var isResizing = false; //窗口宽度是否可以改变
var left = $('#widthAuto');
var right = $('#mainFrame');
var handle = $('#handle');

$(function () {
    handle.on('mousedown', function (e) { 
        isResizing = true; //窗口宽度可以改变
    });

    $(document).on('mousemove', function (e) {
        if (!isResizing)
            return;
        var width = e.clientX;
        width = width<300?300:width; //最小宽度300
        width = width>1000?1000:width;//最大宽度1000
        left.css('width',width);
        e.preventDefault(); //去除默认事件
        e.stopPropagation();
    }).on('mouseup', function (e) { 
        isResizing = false;  //窗口宽度不可以改变
    });
    //若接受到frame窗口有鼠标抬起的消息，则设置窗口宽度不可以改变
    window.addEventListener("message", function(e) {
    	 isResizing = false;
    });    
});

frame框体-js代码：

$(function(){
	$(document).on('mouseup', function (e) { 
		window.parent.postMessage({ }, '*');
	});		   
});