This scenario involves dragging a wider element than its parent, which has the CSS property overflow set to hidden. The parent's width and overflow settings are fixed and cannot be altered.
Below is the HTML code:
<div class="container">
<p class="text">The quick brown fox jumps over the lazy dog.</p>
</div>
Here is the corresponding CSS code:
.container {
position:relative;
width:300px;
height:50px;
background:#ccc;
overflow:hidden; // caution: changing to overflow-x:hidden will not work
}
.text {
position:absolute;
top:7px;
margin:0;
width:1000px;
font-size:30px;
}
Incorporate jQuery like this:
$('.text').draggable({
axis: 'x',
})
To enhance the demo, visit: https://jsfiddle.net/jeafgilbert/LtkkzccL/
The task at hand is to allow users to drag only the sentence without creating spaces before or after it.