通过拖动它的左/上边框而不用jQuery拖动来调整div的高度/宽度？ [英] Adjust a div's height/width by dragging its left/top border without jQuery draggable?

问题描述

我一直在努力实现这一目标！我们不需要额外的依赖项，因此不需要使用UI可拖动。
无论我尝试过的都在这里： http://jsfiddle.net/wSTcJ/

 < div id =cont> 
< div id =test> 
 
< / div> 
< div id =test2> 
 
< / div> 
< div id =drag> 
 
< / div> 
< / div> 
  

jQuery代码位于Fiddle中。

第一个div在第二个下面。第二个的宽度保持为0，现在当我拖动拖动条时，我想调整此div的宽度，显示其内容并因此重叠第一个内容。我的代码允许我拖动，但在一段时间后停止，并且不会从右向左拖动！

任何想法使它工作？

解决方案

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

我假设您需要一个不同的垂直大小调整栏。

有些
$ b

• mousemove 和 mouseup 应该绑定到父元素，通常是 document 。 JavaScript没有任何类型的捕获鼠标（如WPF中的CaptureMouse（）），这意味着如果用户移动鼠标速度过快并离开元素，则鼠标事件将不再被事件处理程序捕获。通过绑定文档，确保您的页面中的鼠标事件始终被捕获。


• 在页面中引用可拖动对象 mousedown 有助于保持理智。


• 如果要调整元素大小，还必须更改元素 width 。


• 如果您没有取消绑定添加的 mouseup 和 mousemove 绑定，它们可能会被多次添加，以后会触发多次。 code>因为当用户没有拖动时， mousemove 事件根本不应该存在。


• 为了在调整大小后继续填充元素的背景我在CSS中将它改为 width 和 height 为100％。

绝大多数可拖动的div都是绝对定位而非相对的。改变这一点还需要对代码进行一些更改。

I've been struggling to achieve this! We don't want an extra dependency hence not using UI draggable. Whatever I tried is over here: http://jsfiddle.net/wSTcJ/

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

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

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

    </div>
</div>

And the jQuery code is in the Fiddle.

The first div is under the second. The second one's width is kept to 0, now when I drag the drag bar, I want to adjust the width of this div, revealing its content and thus overlapping the first one's content. My code allows me to drag, but stops after some time and doesn't drag from the right to left!

Any ideas to make it working?

解决方案

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

I'm assuming you want a different bar for the vertical resizing.

Some notes of the changes I made:

• mousemove and mouseup should be bound to a parent element, usually document. JavaScript does not have any sort of capture mouse (like CaptureMouse() in WPF) meaning if the user moves the mouse too quickly and leaves your element then your mouse events will stop being captured by your event handlers. By binding the document you ensure the mouse events within your page will always be captured.
• Making a reference to your dragable object in the mousedown helps keep you sane.
• If you want to resize the element you'll also have to change the elements width.
• If you don't unbind the added mouseup and mousemove bindings they may be added multiple times, later firing as many times.
• Don't really need drag = true because the mousemove event shouldn't exist at all when the user isn't dragging.
• In order for the background to continue filling your element after it was resized I changed it's width and height to 100% in the CSS.

Most dragable divs are given an absolute positioning rather then relative. Changing this will also require some changes in the code.

这篇关于通过拖动它的左/上边框而不用jQuery拖动来调整div的高度/宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！