通過拖動它的左/上邊框而不用jQuery拖動來調整div的高度/寬度？

我一直在努力實現這一目標！我們不需要額外的依賴項，因此不需要使用UI可拖動。無論我嘗試是在這裏：http://jsfiddle.net/wSTcJ/通過拖動它的左/上邊框而不用jQuery拖動來調整div的高度/寬度？

<div id="cont"> 
    <div id="test"> 

    </div> 
    <div id="test2"> 

    </div> 
    <div id="drag"> 

    </div> 
</div>

而jQuery代碼是在小提琴。

第一個div在第二個下面。第二個的寬度保持爲0，現在當我拖動拖動條時，我想調整此div的寬度，顯示其內容並因此重疊第一個內容。我的代碼允許我拖動，但在一段時間後停止，不會從右向左拖動！

任何想法，使其工作？

來源

2012-12-22 Rutwick Gangurde

請在您的問題中加入相關代碼（JavaScript/jQuery）：Stack Overflow應該是自包含的，如果沒有代碼，當JS Fiddle下一次崩潰時，這個問題就變得毫無意義。 –

謝謝！我在這裏添加了一些我的html，並將js放在小提琴中，因爲人們可以在那裏嘗試。我一定會在下一次加入我的js。 –

http://jsfiddle.net/wSTcJ/2/

我假設你想爲垂直調整大小不同的吧。

的我所做的更改的一些注意事項：

mousemove和mouseup應綁定到一個父元素，通常document。 JavaScript沒有任何類型的捕獲鼠標（如WPF中的CaptureMouse（）），這意味着如果用戶移動鼠標太快而離開元素，則鼠標事件將不再被事件處理程序捕獲。通過綁定document，您可以確保始終捕獲頁面中的鼠標事件。
在mousedown中引用可拖動對象有助於保持理智。
如果你想調整元素的大小，你還必須更改元素width。
如果您不解除綁定添加的mouseup和mousemove綁定，可能會多次添加它們，之後會發射多次。
實際上並不需要drag = true，因爲當用戶沒有拖動時mousemove事件根本不應該存在。
爲了讓背景在調整大小後繼續填充元素，我將其在width和height之間更改爲CSS中的100％。

大多數可拖動的div給出了絕對定位而不是相對的。改變這個也需要對代碼進行一些修改。

來源

2012-12-22 12:28:02

謝謝你。易於理解的代碼。將會有一個垂直條可選。我的意思是我會根據我的指示來切換。 –

我加了'drag = true'因爲我在FF中遇到奇怪的行爲！ –

我試過這個，代碼正在改變父容器的寬度，而不是測試2 div，其寬度我想增加！ –

我收養了你的代碼的解決了它這樣：http://jsfiddle.net/bukart/wSTcJ/1/

你必須在邏輯和方法使用的一些問題。

$(function() { 

    $('#drag').each(function() { 

     var $drag = $(this); 


     $drag.parent().css({ 
      'margin-left'  : $drag.parent().offset().left + 'px' 
     }); 

     $drag.on('mousedown', function(ev) { 
      var $this = $(this); 
      var $parent = $this.parent(); 
      var poffs = $parent.position(); 
      var pwidth = $parent.width(); 

      var x = ev.pageX; 
      var y = ev.pageY; 

      $this.parent(); 

      $(document).on('mousemove.dragging', function(ev) { 
       var mx = ev.pageX; 
       var my = ev.pageY; 

       var rx = mx - x; 
       var ry = my - y; 

       $parent.css({ 
        'left'  : (poffs.left + rx) + 'px', 
        'width'  : (pwidth - rx) + 'px' 
       }); 


      }).on('mouseup.dragging mouseleave.draggign', function(ev) { 
       $(document).off('.dragging'); 
      }); 


     }); 

    }); 

});

來源

2012-12-22 12:22:38 bukart

非常感謝！我正在嘗試... –

通過拖動它的左/上邊框而不用jQuery拖動來調整div的高度/寬度？

回答

相關問題