jquery - 如何通过仅拖动它的一侧来调整 DIV 的大小？

Question

让我更具体一点...我不希望 DIV 在我拖动时调整大小。我想将它拖出(可能有一条垂直线跟随我的光标)，当我松开时，它会调整 div 的大小。

Answer 1

看看这个例子

HTML

<div id="sidebar">
     <span id="position"></span>
    <div id="dragbar"></div>
    sidebar
</div>
<div id="main">
    main
</div>

jquery

var dragging = false;
$('#dragbar').mousedown(function(e){
   e.preventDefault();

   dragging = true;
   var main = $('#main');
   var ghostbar = $('<div>',
                    {id:'ghostbar',
                     css: {
                            height: main.outerHeight(),
                            top: main.offset().top,
                            left: main.offset().left
                           }
                    }).appendTo('body');

    $(document).mousemove(function(e){
      ghostbar.css("left",e.pageX+2);
   });
});

$(document).mouseup(function(e){
   if (dragging) 
   {
       $('#sidebar').css("width",e.pageX+2);
       $('#main').css("left",e.pageX+2);
       $('#ghostbar').remove();
       $(document).unbind('mousemove');
       dragging = false;
   }
 });

演示在 http://jsfiddle.net/gaby/Bek9L/1779/

这是对我在 Emulating frame-resize behavior with divs using jQuery without using jQuery UI? 中发布的代码的改动