Javascript jQuery可拖动包含溢出隐藏

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

HTML

jQuery

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

修改此演示：

---

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

您可以在

拖动

回调中检查可拖动元素的当前位置，如果该位置超出边界，则覆盖该位置

换句话说，如果左定位大于

0

，则覆盖左定位并将其设置回

0

，使其永远不会超过

0

。如果可拖动图元的宽度减去父图元的宽度小于左定位，请替代左定位以将其设置回偏移宽度

$（'.text'）。可拖动({
轴：“x”，
拖动：函数（事件、ui）{
var left=ui.position.left，
offsetWidth=（$（this.width（）-$（this.parent（）.width（））*-1；
如果（左>0）{
ui.position.left=0；
}
如果（偏移网络宽度>左侧）{
ui.position.left=偏移网络宽度；
}
}
});
.container{
位置：相对位置；
宽度：300px；
高度：50px；
背景：#ccc；
溢出：隐藏；
}
.文本{
位置：绝对位置；
顶部：7px；
保证金：0；
空白：nowrap；
字体大小：30px；
}

敏捷的棕色狐狸跳过懒惰的狗

谢谢你，Josh Crozier！顺便说一句，强制向右拖动文本会使文本跳到末尾。我添加了parent的宽度以便更容易地查看（）。
.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;
}

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