0

在容器内部，我有一个仅draggable沿 x 轴的 div。我希望用户能够通过单击内部任意位置并垂直拖动来调整容器大小。为了实现这一点，我将resizable方法的句柄高度设置为容器高度的 100%。调整大小可以根据需要进行，但现在由于手柄的大小而阻止了可拖动交互。我认为可以在不使用内置的可调整大小方法的情况下完成这种类型的调整大小，但我还没有想出一个优雅的解决方案。

小提琴：http: //jsfiddle.net/LuLd9/

HTML：

<footer>
    <div id="queue">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</footer>

JS：

$('#queue').draggable({
   axis: 'x',
   scroll: false
});

$('footer').resizable({
    handles: 'n'
});

CSS：

#queue {
    overflow: visible;
    height: 100%;
    border: 1px solid red;
    z-index: 1;
}
footer {
    position: relative;
    height: 20%;
    top: 60%;
    overflow: hidden;
    border: 1px solid black;
}
.child {
    display: inline-block;
    height: 80%;
    width: 15%;
    border: 1px solid black;
}
.ui-resizable { position: relative;}
.ui-resizable-n { cursor: n-resize; height: 100%; width: 100%; top: -5px; left: 0; }
4

1 回答 1

1

我认为您要做的是使用drag可拖动事件来实现调整大小操作。这似乎非常接近您想要的：

$('#queue').draggable({
    axis: "x",
    scroll: false,
    drag: function( event, ui ) {        
        var ft = $('footer').position().top;
        var fh = $('footer').height();
        $('footer').css('height', fh + (ft - ui.offset.top )+ 'px');
        $('footer').css('top', ui.offset.top);
    }    
});

小提琴

我还必须更改 to 的位置footer-absolute否则一切都会变得不稳定，这可能不适合您想要做的事情。

编辑

通过这样做，我可以接近我认为你想要的：

$('#queue').draggable({
    axis: "x",
    scroll: false,
    start: function( event, ui ) { 
       $(this).data('dir', '');       
    },
    drag: function( event, ui ) {
        var dir = $(this).data('dir');
        // If we don't have a direction, decide where we're going
        if ((dir != 'y') && (dir != 'x')) {
            var dy = ui.originalPosition.top - ui.position.top;
            var dx = ui.originalPosition.left - ui.position.left;
            dir = (Math.abs(dy) > Math.abs(dx))?'y':'x';
            $(this).data('dir', dir);
        }

        if (dir == 'y') { 
          // Change the height
          var ft = $('footer').position().top;
          var fh = $('footer').height();
          $('footer').css('height', fh + (ft - ui.offset.top )+ 'px');
          $('footer').css('top', ui.offset.top);
          // Prevent the drag from happening
          // ??? 

       }
    }    
});

小提琴

如果您水平拖动它会阻止调整大小触发 - 但我无法阻止该 if 子句中发生拖动。如果我停止事件（return false或stopImmediatePropagation()），则拖动被取消并且你放下元素，但我不能只是改变位置，因为我认为上面的事件在它移动之前就已经发生了。

我可能错过了 jQuery-UI 界面上的一个选项，希望这能让你更接近。可能值得单独提出一个关于“我如何才能停止拖累”的问题——其他人也可能会想出一个更简洁的实现。

于 2013-09-23T09:46:01.207 回答