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

Question

我的 Salesforce 平台上有一个由 JavaScript 和 HTML 控制的 View 。我有一个要求，因为用户有不同的职责和需求，他们希望能够调整他们的 div 大小和 View ，以便为用户定制。以下是我的 div 结构，有什么想法可以让他们调整它的大小吗？ future 的要求是我保存 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 中应该不难。如果您有任何疑问，请告诉我!

fiddle :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();