3

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

有什么想法可以让它发挥作用吗？

4

2 回答 2

9

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

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

我所做的更改的一些注释：

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

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

于 2012-12-22T12:28:02.400 回答
0

我采用了您的代码并以这种方式解决了它：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-22T12:22:38.573 回答