拖动时调整大小 div

Question

我有一个 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 的大小，使其下方的元素自动定位。

Answer 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>

希望对您有所帮助。

拖动时调整大小 div

Resizing div on drag

html

jquery

resize

drag