拖动时调整 div 的大小答案

【问题标题】：Resizing div on drag拖动时调整 div 的大小
【发布时间】：2015-04-11 20:30:50
【问题描述】：

我有一个 div 元素，我需要在拖动边框时调整其大小。我粘贴下面的代码。一切正常，但随着我增加高度，拖动的 div 下方的元素位置保持静态，并且拖动的 div 与它们重叠。

var cmd = false;
var crs = false;
$(document).on('mousemove', '.chartbody', function(e) {
    var y = (e.pageY - $(this).offset().top);
    var ht = $(this).height();
    if (!cmd) {
        if (y - 1 == ht) {
            crs = true;
        } else {
            crs = false;
        }   
    }
    else
        if (crs) {
            $(this).height(y);
        }   
});

$(document).on('mouseup', '.chartbody', function(e) {
    cmd = false;
});

$(document).on('mousedown', '.chartbody', function(e) {     
    cmd = true;
});

如何调整 div 的大小，使其下方的元素自动定位。

【问题讨论】：

您是否在使用任何类型的相对/绝对定位？
也许可以创建一个小提琴？

标签： jquery html resize drag

【解决方案1】：

您可以轻松使用Jquery ui plugin 快速解决此问题。

将示例中提到的脚本和样式表添加到您的页面

<link href="~/Content/themes/base/all.css" rel="stylesheet" />

<style type="text/css">
    .parent {
        width: 100%;
        height: 100px;
    }

    .parent_1 {
        background: red;
    }

    .parent_2 {
        background: blue;
        margin: 10px 0;
    }
</style>

<div class="new_item"></div>
<div class="body">
    <br><br>
    <div class="parent parent_1">

    </div>
    <div class="parent parent_2">

    </div>
</div>


    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.11.2.js">
    </script>

    <script type="text/javascript">

        $(document).ready(function () {
            $("div.parent_1").resizable();
        });

    </script>

希望这会有所帮助。

【讨论】：