CODEWITHSUNDEEP
jqueryhtmlresizedrag
Nitesh Oswal
Nitesh Oswal

Reputation: 99

Resizing div on drag

I have a div element which i need to resize on dragging the border. I pasting the code below. Everything is working fine but as i increase the height the position of elements below the dragged div stays static and the dragged div overlaps them.

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;
});

How can i resize the div such that elements below it are automatically positioned.

Upvotes: 0

Views: 258

Answers (1)

Frebin Francis
Frebin Francis

Reputation: 1915

you can easily use Jquery ui plugin to solve this issue quickly.

Add the Scripts and Stylesheets mentioned in the sample to your page

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

Hope this helps.

Upvotes: 2

Related Questions