限制 jQuery.draggable() 的 x 轴拖动长度

Question

我试图限制元素拖动像素的距离。我循环遍历每个子元素，将其添加到总和中，并尝试将左侧拖动限制为该数量。

我无法使用父包含，因为可拖动元素实际上并不需要父元素的边界，而是需要每个选项卡的计算宽度。

这是我到目前为止所得到的：

JavaScript

   var maxMenuWidth = 0;
   $('.tabName').each(function(index, el) {
       var menuWidth = $(this).outerWidth();

       maxMenuWidth = maxMenuWidth + menuWidth;
   });
   maxMenuWidth = maxMenuWidth;
   console.log(maxMenuWidth);

  jQuery("#TabLabels").draggable({
    axis: "x",
    cursor: "move", 
    drag: function( event, ui ) {
        ui.position.left = Math.min( 0, ui.position.left );
        ui.position.left = Math.max( maxMenuWidth, ui.position.left );
    }
  });

超文本标记语言

    <div id="TabLabels" class="ui-draggable">
      <span class="tabName">Tab 1</span>
      <span class="tabName">Tab 2</span>
      <span class="tabName">Tab 3</span>
      <span class="tabName">Tab 4</span>
   </div>

我可以从以下行限制右拖动：

ui.position.left = Math.min( 0, ui.position.left );

但下一行，

ui.position.left = Math.max( maxMenuWidth, ui.position.left );

使可拖动元素在 maxMenuWidth 处设置内联样式。

是否有像 ui.position.right 这样的东西会限制右侧的拖动长度？

Answer 1

您应该能够通过以下方式限制这一点：

drag: function(event, ui) {
    var leftPosition = ui.position.left;
    if (leftPosition > maxMenuWidth) {
        ui.position.left = maxMenuWidth;
    }
}

我在http://codepen.io/anon/pen/bEBOde设置了一个示例。请注意，我对您的代码进行了一些其他细微调整，例如删除冗余

maxMenuWidth = maxMenuWidth;