限制 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 );
    }
  });

HTML

    <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;

Answer 2

$("#TabLabels").draggable({
    axis: 'y',
    containment: 'children',
    delay: 5,
    start: function( event, ui ) {
      $(this).addClass('my_class'); 
    },
    stop: function( event, ui ) {
      $(this).removeClass('my_class'); 
    }
  })

.my_class{
  border: 1px soild #000 !important;
}

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

Limit x axis drag length for jQuery.draggable()

jquery

jquery-ui

draggable

jquery-ui-draggable