jQuery 隐藏了可拖动的包含溢出

Question

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

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。如果可拖动元素的宽度减去父元素的宽度小于左侧定位，则覆盖左侧定位以将其设置回偏移宽度。

Updated Example

$('.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>

jQuery 隐藏了可拖动的包含溢出

jQuery Draggable Containment Overflow Hidden

javascript

css

jquery

jquery-ui

draggable