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

Question

容器内部沿着X轴有一个div，即draggable。我希望用户能够通过点击任意位置并垂直拖动来调整容器大小。为了做到这一点，我将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

我瘦k您需要做的是使用可拖动的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界面上缺少一个选项，希望能让你更接近。可能值得一个单独的问题，就是'我该如何阻止拖拽' - 其他人可能也会提出一个更好的实现。