使用带有父元素和子元素的Javascript调整Div的大小

Question

我有一个视图位于由JavaScript和HTML控制的Salesforce平台上。 我有一个要求，因为用户的职责和需求不同，所以他们希望能够调整其div大小和视图，以便可以根据用户进行自定义。 以下是我的div结构，我如何允许他们重新调整尺寸？ 将来的要求是我保存div的布局/大小，因此这就是我认为必须使用Javascript的原因。

编辑至问题：应该通过拖动将其调整为用户想要的尺寸（仅针对高度）。

<div id="resizeMe" class="hp-onecolumn hp-sectionpad">
    <div class="hp-borders hp-boxcontainer" id="dvTripTask">
        <span class="hp-bluebox1"><h3 class="hp-header_label hp-headerpad">Trip Planning To Do List</h3><a HREF="#" onClick="openNewTab('/00Oa0000008W7DB?isdtp=vw');return false" id="btnReports">View Report</a>
            <span class="hp-range-container">
                <span class="ui-widget" targetId="TripTasks"><select id="drpTripTasksRanges" style="visibility:hidden;" class="drpRanges" targetId="TripTasks"></select></span>
                <span  class="hp-datepicker"><span id="lblTripTasksFrom">From: </span><input id="dpTripTasksFromDate" class="hp-datepicker_control hp-datefrom" targetId="TripTasks"/> To: <input id="dpTripTasksToDate" class="hp-datepicker_control hp-dateto" targetId="TripTasks"/></span>
            </span>
        </span>
        <div id="dvTripTaskInner" class="hp-innerbox">
            <div class="hp-innerboxpad">
                <table id="tblTripTasksList"></table>
                <div id="pgTripTask"> </div>
            </div>
        </div>
    </div>
    <div id="resizer"></div>
</div>

Answer 1

非常快速的模型，但这是总体思路。 将这个想法应用到您的特定HTML中应该并不难。 如果您有任何疑问，请告诉我！

小提琴： http : //jsfiddle.net/mok38fur/5/

HTML：

<div id="resizeMe"></div>
<div id="resizer"></div>

CSS：

#resizeMe {
    height: 100px;
    width: 100%;
    background: blue;
}
#resizer {
    height: 10px;
    width: 100%;
    background: red;
    cursor: row-resize;
}

JS：

var yAxisDrag;
var resizer;
var resizeMe;
var resizeMeHeight;

function makeResizable() {
    resizer = document.getElementById('resizer');
    resizeMe = document.getElementById('resizeMe');
    resizer.addEventListener('mousedown', initializeDrag);
};

function initializeDrag(event) {
    yAxisDrag = event.clientY;
    resizeMeHeight = resizeMe.offsetHeight;
    document.addEventListener('mousemove', onResizerDrag);
    document.addEventListener('mouseup', onStopResizerDrag);
};

function onResizerDrag(event) {
    var newResizeMeHeight = resizeMeHeight + event.clientY - yAxisDrag;
    if (newResizeMeHeight <= 30) {
        return;
    }
    resizeMe.style.height = newResizeMeHeight + 'px';
};

function onStopResizerDrag(event) {
    document.removeEventListener('mousemove', onResizerDrag);
    document.removeEventListener('mouseup', onStopResizerDrag);
};

makeResizable();

Answer 2

如果允许使用jQuery和jQuery UI之类的第三方javascript库，我建议您使用jQuery UI的Resizable插件 。