jquery - 在没有 jQuery 可拖动的情况下通过拖动左/上边框来调整 div 的高度/宽度？

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 应该绑定(bind)到父元素，通常是 document。 JavaScript 没有任何类型的捕获鼠标(如 WPF 中的 CaptureMouse())，这意味着如果用户移动鼠标太快并离开你的元素，那么你的鼠标事件将停止被你的事件处理程序捕获。通过绑定(bind)文档，您可以确保始终捕获页面中的鼠标事件。
• 在 mousedown 中引用您的可拖动对象有助于让您保持清醒。
• 如果您想调整元素的大小，您还必须更改元素的宽度。
• 如果您不取消绑定(bind)添加的 mouseup 和 mousemove 绑定(bind)，它们可能会被添加多次，之后会触发多次。
• 真的不需要drag = true，因为当用户没有拖动时，mousemove 事件根本不应该存在。
• 为了让背景在调整大小后继续填充您的元素，我在 CSS 中将其 width 和 height 更改为 100%。

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