隐藏的jQuery可拖动遏制溢出

Question

这是关于拖动比其父元素更宽的元素（溢出：隐藏）。 父级的宽度和溢出选项是固定的，无法更改。

的HTML

<div class="container">
  <p class="text">The quick brown fox jumps over the lazy dog.</p>
</div>

的CSS

.container {
  position:relative;
  width:300px;
  height:50px;
  background:#ccc;
  overflow:hidden; // be careful, changing to overflow-x:hidden breaks the answer
}
.text {
  position:absolute;
  top:7px;
  margin:0;
  width:1000px;
  font-size:30px;
}

jQuery的

$('.text').draggable({
  axis: 'x',
})

修改此演示： https : //jsfiddle.net/jeafgilbert/LtkkzccL/

因此我们只能拖动句子， 而不能在句子之前或之后留空格 。

Answer 1

您可以在drag回调中检查可拖动元素的当前位置，然后在位置超出范围时覆盖该位置。

换句话说，如果左侧位置大于0 ，则覆盖左侧位置并将其重新设置为0 ，以使其永远不会超过0 。 如果可拖动元素的宽度减去父元素的宽度小于左侧位置，则覆盖左侧位置以将其设置回偏移宽度。

更新示例

 $('.text').draggable({ axis: 'x', drag: function(event, ui) { var left = ui.position.left, offsetWidth = ($(this).width() - $(this).parent().width()) * -1; if (left > 0) { ui.position.left = 0; } if (offsetWidth > left) { ui.position.left = offsetWidth; } } }); 

 .container { position: relative; width: 300px; height: 50px; background: #ccc; overflow: hidden; } .text { position: absolute; top: 7px; margin: 0; white-space: nowrap; font-size: 30px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <div class="container"> <p class="text">The quick brown fox jumps over the lazy dog.</p> </div>