通过拖动左/上边框调整div的高度/宽度而不使用jQuery draggable？

Question

我一直在努力实现这一目标!我们不希望有额外的依赖,因此不使用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的宽度,显示其内容,从而重叠第一个内容.我的代码允许我拖动,但在一段时间后停止并且不会从右向左拖动!

有什么想法使它运作？

Answer 1

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

我假设你想要一个不同的栏来进行垂直调整大小.

关于我所做的改变的一些注意事项:

• mousemove并且mouseup通常应绑定到父元素document.JavaScript没有任何类型的捕获鼠标(如WPF中的CaptureMouse()),这意味着如果用户移动鼠标太快并离开您的元素,那么您的鼠标事件将不再被事件处理程序捕获.通过绑定document您可以确保始终捕获页面中的鼠标事件.
• 在mousedown帮助中引用您的可拖动对象可以让您保持理智.
• 如果要调整元素大小,还必须更改元素width.
• 如果你没有取消绑定添加mouseup和mousemove绑定,可以多次添加它们,稍后再触发多次.
• 不需要drag = true因为mousemove当用户没有拖动时事件根本不存在.
• 为了使背景继续填充你的元素它被调整后,我改变了它width,并height在CSS 100%.

大多数可拖动的div都是绝对定位而不是相对定位.更改此设置还需要对代码进行一些更改.