[前端] 内容拉伸(拖拽效果)

项目中有时候一个简单的展开容器/折叠容器已经不能适应需求了，这时候要把展开的容器再次拉伸显示更多内容，这样的体验效果更好。。

效果：当我用鼠标拖动这块区域的时候 ，会显示更多内容，当然这个拖动肯定要有个上限和下限的设置

因为是项目中的，所以没有单独用测试效果展现，但主要的原理，是把处理后的clientY动态的赋值给容器，鼠标点击的这个点要处理下偏移大小。。。

代码：

/* 拖拽扩展屏幕 */ $('.vmd-tab').mousedown(function(e) {
    // 起始点的坐标  var startY = e.clientY;
    
    var nMaxHgt = $(window).height() - 240;  // 往上移动的最大值  var nOffsetTop = $('.vmd-tab-content').offset().top - startY; // 偏移值   // 移动  $(document).on('mousemove', function(e) {
        e.preventDefault();
        var endY = e.clientY;

        // 重载函数计算高度  fHgt();

        // 动态赋值  $('.vmd-tab-content').outerHeight($(window).height()-endY-nOffsetTop);

        // 判断最大值或最小值  if($('.vmd-tab-content').outerHeight() >= nMaxHgt) {
            $('.vmd-tab-content').outerHeight(nMaxHgt);
        } else if($('.vmd-tab-content').outerHeight() <= nVmdTabContentHgt) {
            $('.vmd-tab-content').outerHeight(nVmdTabContentHgt);
        }
    });
});

// 鼠标松开，取消其移动事件 $(document).mouseup(function() {
    $(this).off('mousemove');
});

关注我，关注我的博客，提出你的意见，我会写的更好！