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

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>