Question

在容器内部，我只有一个沿x轴的draggable 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; }

Answer 1

我认为您需要做的是使用draggable的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);
    }    
});

Fiddle

我还必须将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
          // ??? 

       }
    }    
});

Fiddle

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

我可能在jQuery-UI界面上缺少一个选项，希望能让你更接近。可能值得单独提出一个问题，就是“如何阻止拖延” - 其他人也可能会提出更简洁的实施方案。

可调整大小的句柄阻止了可拖动的交互

1 个答案: