JS 实现 ResizeBar，可拖动改变两个区域(带iframe)大小

时间：2014-01-17 08:45:09 收藏：0 阅读：419

将网页化成两个区域，左边区域是一个树结构，右边区域是一个iframe，点击左边区域时，右边区域加载页面。

实现功能：在两个区域间加一个可拖动条，拖动时改变左右两个区域的大小。

在Google上搜索slider，出来的结果都是关于滑动块的，最后搜索resize bar才找到正确的结果。

解决方案：jsfiddle的一个示例 http://jsfiddle.net/gaby/Bek9L/186/

以上示例能实现滑动效果，但是当鼠标移动到右侧的iframe时，鼠标移动时 $(document).mousemove 并不会响应，因为在iframe中已经不再是 $(document)了。

解决办法：在原始代码的基础上添加 $("#myframe").contents().mousemove 和 $("#myframe").contents().mouseup 并在up时将 $(document) 和 $("#myframe")的 mousemove事件都unbind。

改后的代码如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" 
content="text/html; charset=UTF-8">
  <title>ResizeBar by yhzhtk</title>
  <meta name="url" 
content="http://yhzhtk.info/2014/01/16/js-resizebar.html"/>
  <script type=‘text/javascript‘ 
src=‘http://code.jquery.com/jquery-1.6.js‘></script>
 
  <style type=‘text/css‘>
body,html{width:100%;height:100%;padding:0;margin:0;}
#main{
background-color: BurlyWood;
float: right;
position: absolute;
height:200px;
right: 0;
left:200px;
margin-top:10px;
 
}
#sidebar{
background-color: IndianRed;
 
margin-top:10px;
width:200px;
float: left;
position: absolute;
height:200px;
overflow-y: hidden;
}
 
#dragbar{
background-color:black;
height:100%;
float: right;
width: 3px;
cursor: col-resize;
}
#ghostbar{
width:3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999}
</style>
 
<script type=‘text/javascript‘>//<![CDATA[ 
$(window).load(function() {
  var 
i = 0;
  var 
dragging = false;
  var 
$main = $(‘#main‘)
 
 
  $(‘#dragbar‘).mousedown(function(e) {
    e.preventDefault();
 
    dragging = true;
    var 
ghostbar = $(‘<div>‘, {
      id: ‘ghostbar‘,
      css: {
        height: $main.outerHeight(),
        top: $main.offset().top,
        left: $main.offset().left
      }
    }).appendTo(‘body‘);
 
    $(‘#mousestatus‘).html("mousedown" 
+ i++);
 
    $(document).mousemove(function(e) {
      ghostbar.css("left", e.pageX + 2);
    });
    // 此处新增，当鼠标在iframe中时也会移动
    $("#myiframe").contents().mousemove(function(e) {
      ghostbar.css("left", e.pageX + $main.offset().left + $("#dragbar").width() * 2);
    });
  });
  $(document).mouseup(function(e) {
    $(‘#clickevent‘).html(‘in another mouseUp event‘ 
+ i++);
    if 
(dragging) {
      $(‘#sidebar‘).css("width", e.pageX + 2);
      $main.css("left", e.pageX + 2);
      $(‘#ghostbar‘).remove();
      $(document).unbind(‘mousemove‘);
      // 此处新增，解绑时将myiframe也接触
      $("#myiframe").contents().unbind(‘mousemove‘);
      dragging = false;
    }
  });
  // 新增 myiframe的mouseup事件
  $("#myiframe").contents().mouseup(function(e) {
    if 
(dragging) {
      $(‘#sidebar‘).css("width", e.pageX + $main.offset().left + $("#dragbar").width());
      $main.css("left", e.pageX + $main.offset().left + $("#dragbar").width());
      $(‘#ghostbar‘).remove();
      $(document).unbind(‘mousemove‘);
      // 此处新增，解绑时将myiframe也接触
      $("#myiframe").contents().unbind(‘mousemove‘);
      dragging = false;
    }
  });
}); //]]>
</script>
</head>
<body>
  <div id="sidebar">
    <span id="position"></span>
    <div id="dragbar"></div>
    sidebar
  </div>
  <div id="main">
    <iframe id="myiframe">main</iframe>
  </div>
</body>
</html>

这样即使有iframe，鼠标移动时也能捕捉到事件，完成想要的拖动改变区域大小的效果。

原文：http://www.cnblogs.com/yhzhtk/p/3522746.html