调整一个div'；在不使用jQuery Dragable的情况下拖动其左/上边框来设置高度/宽度？

我一直在努力实现这一目标！我们不需要额外的依赖项，因此不使用UI Dragable。 我试过的都在这里：

而jQuery代码就在这里

第一个分区在第二个分区之下。第二个div的宽度保持为0，现在当我拖动拖动条时，我想调整这个div的宽度，显示它的内容，从而重叠第一个div的内容。我的代码允许我拖动，但在一段时间后停止，不会从右向左拖动

---

有什么办法让它工作吗？

我采用了你的代码，并通过以下方式解决了它：

您在逻辑和方法的使用方面遇到了一些问题

$( 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' );
            } );


        } );

    } );

} );

​

我假设你想要一个不同的垂直调整条

我所做的一些改动：

• mousemove

  和

  mouseup

  应该绑定到父元素，通常是

  document

  。JavaScript没有任何类型的捕获鼠标（如WPF中的CaptureMouse（）），这意味着如果用户移动鼠标太快并离开元素，则事件处理程序将停止捕获鼠标事件。通过绑定

  文档

  ，您可以确保始终捕获页面中的鼠标事件
• 在

  mousedown

  中引用可拖动对象有助于保持清醒
• 如果要调整元素的大小，还必须更改元素的宽度
• 如果不解除添加的

  mouseup

  和

  mousemove

  绑定的绑定，则可能会多次添加它们，以后会触发相同的次数
• 实际上不需要

  drag=true

  ，因为当用户不拖动时，

  mousemove

  事件根本不应该存在
• 为了让背景在调整大小后继续填充元素，我将CSS中的

  宽度

  和

  高度

  更改为100%

---

大多数可拖动div都是绝对定位，而不是相对定位。更改此选项还需要对代码进行一些更改。

请在问题中加入相关代码（JavaScript/jQuery）：堆栈溢出应该是自包含的，如果没有代码，当JS FIDLE next出现问题时，此问题将变得毫无意义。谢谢！我在这里添加了一些html，并将js放在一个小提琴里，因为人们可以在那里尝试。下次我一定会添加我的js。谢谢你。易于理解的代码。将有一个垂直的酒吧可选。我的意思是，我将根据我的指示来切换它！我添加了

drag=true

因为我在FF中遇到了奇怪的行为！我试过了，代码正在更改父容器的宽度，而不是test2div，我想增加它的宽度！根据你的解释和代码，我编码了我想要的！请检查一下，让我知道这是否有效。欢迎您的专家加入！还有一个小问题，当我单击拖动条时，它位于光标的右侧。这会导致mouseup在我将div拖回其原始位置（即最左侧）时失败！

$( 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' );
            } );


        } );

    } );

} );

​