div实现拖拽效果，宽度发生变化_div宽高改变加延时动效-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37809911/article/details/99691823

这篇博客演示了如何利用jQuery实现一个div元素的拖拽功能，通过拖动div之间的边框，可以动态改变div的宽度。示例中包含了CSS样式和JavaScript代码，展示了在页面上创建三个并排的div，用户可以拖动中间的边框来调整左右两个div的宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery拖拽改变div大小效果</title>
<meta name="keywords" content="jquery拖拽,改变大小" />
<meta name="description" content="jquery拖拽改变div大小效果" />

   labBtn.bind('mousedown',function(){
           dragging = true;
           leftOffset = $("#wrap").offset().left;
           inx    = $(this).index('label');
       }
   );

   doc.onmousemove = function(e){
       if (dragging) {
           labBtn.eq(inx).prev().text( labBtn.eq(inx).prev().width() );
           labBtn.eq(inx).next().text( labBtn.eq(inx).next().width() );
           //--------------------------------------------
           clickX = e.pageX;
           $("#test").text( '鼠标位置：' + clickX );

           //判断第几个拖动按钮
           if( inx == 0 ){

               //第一个拖动按钮左边不出界
               if(clickX > leftOffset) {
                   labBtn.eq(inx).css('left', clickX - 7 - leftOffset + 'px');//按钮移动

                   labBtn.eq(inx).prev().width( clickX-leftOffset + 'px');
                   nextW2 = clickX-leftOffset;
                   labBtn.eq(inx).next().width( wrapWidth - nextW2 - labBtn.eq(inx+1).next().width() + 'px');
               } else {
                   labBtn.eq(inx).css('left', '0px');
               }

               if(clickX > (labBtn.eq(inx+1).offset().left-5)) {
                   //第一个按钮右边不出界
                   labBtn.eq(inx).css('left', parseFloat(labBtn.eq(inx+1).css('left')) -11 + 'px');
                   //第一个按钮，左右容器不出界
                   labBtn.eq(inx).prev().width( labBtn.eq(inx).offset().left + 6 - leftOffset + 11 + 'px' );
                   labBtn.eq(inx).next().width( '0px' );
               }

} else {

               //第二个拖动按钮左边不出界
               if( (clickX) > labBtn.eq(inx-1).offset().left + 10 ) {
                   labBtn.eq(inx).css('left', clickX - 7 - leftOffset + 'px'); //按钮移动

                   labBtn.eq(inx).prev().width( (clickX-leftOffset-labBtn.eq(inx-1).prev().width()) + 'px');
                   nextW = clickX - leftOffset;
                   labBtn.eq(inx).next().width( wrapWidth - nextW + 'px');
               } else {
                   //第二个按钮向左移动不出界
                   labBtn.eq(inx).css('left', parseFloat(labBtn.eq(inx-1).css('left')) +10 + 'px');

                   //第二个按钮左右容器，不出界
                   labBtn.eq(inx).prev().width('0px')
                   labBtn.eq(inx).next().width( wrapWidth - labBtn.eq(inx-1).prev().width() );
               }

               if( clickX >= (leftOffset + wrapWidth) ) {
                   //第二个按钮右边不出界
                   labBtn.eq(inx).css('left', wrapWidth -10 + 'px'); //减去按钮的宽度
                   //第二个按钮左右容器，右边不出界
                   labBtn.eq(inx).prev().width( wrapWidth - labBtn.eq(inx-1).prev().width());
                   labBtn.eq(inx).next().width( '0px' );
               }

           }
       }
   };

   $(doc).mouseup(function(e) {
   dragging = false;
   e.cancelBubble = true;
   })
})
</script>
</body>
</html>