2015-02-11 82 views
0

我有一個div元素,我需要調整拖動邊框的大小。我粘貼下面的代碼。一切工作正常,但隨着我增加高度拖動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的大小使其下面的元素自動定位。

+0

你使用任何相對/絕對定位? – Grushton94 2015-02-11 12:58:21

+0

也許會創建一個小提琴? – 2015-02-11 12:58:39

回答

2

你可以很容易地使用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> 

希望這有助於。