jQuery Draggable Containment Overflow Versteckt

Question

Hier geht es darum, ein breiteres Element als das übergeordnete Element zu ziehen (overflow: hidden). Die Optionen für Breite und Überlauf des Elternteils sind festgelegt und können nicht geändert werden.

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', 
}) 

Ändern Sie diese Demo: https://jsfiddle.net/jeafgilbert/LtkkzccL/

So können wir Ziehen Sie nur den Satz , ohne Leerzeichen vor oder nach dem Satz.

Answer 1

Sie können die aktuelle Position des ziehbaren Elements im Callback drag überprüfen und dann die Position überschreiben, wenn sie außerhalb der Grenzen liegt.

Mit anderen Worten, wenn die linke Positionierung größer als 0 ist, außer Kraft setzen die linke Positionierung und setzen Sie ihn zurück zu 0, so dass es nie 0 überschreiten. Wenn die Breite des ziehbaren Elements minus der Breite des übergeordneten Elements kleiner als die linke Positionierung ist, überschreiben Sie die linke Positionierung, um sie auf die Offset-Breite zurückzusetzen.

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>